wc-button

<wc-button>

Primary interactive element for triggering actions.

A button component for user interaction.

Variants

Primary, secondary, and ghost visual styles.

Variants

PrimarySecondaryGhost

Sizes

Small, medium, and large button sizes.

Sizes

SmallMediumLarge

Disabled

Buttons in disabled state across all variants.

Disabled

PrimarySecondaryGhost

All Combinations

Full variant × size matrix.

All Combinations

Primary SMPrimary MDPrimary LGSecondary SMSecondary MDSecondary LGGhost SMGhost MDGhost LG

API Reference

Properties

4

Attribute	Type	Default	Description
variant	'primary' | 'secondary' | 'ghost'	'primary'	Visual style variant of the button.
size	'sm' | 'md' | 'lg'	'md'	Size of the button.
disabled	boolean	false	Whether the button is disabled.
type	'button' | 'submit' | 'reset'	'button'	The type attribute for the underlying button element.

Events

1

Name	Type	Description
wc-click	CustomEvent	Dispatched when the button is clicked (not disabled).

Slots

1

Name	Description
(default)	Default slot for button label text or content.

CSS Custom Properties

7

Property	Description
--wc-button-bg	Button background color.
--wc-button-color	Button text color.
--wc-button-border-color	Button border color.
--wc-button-border-radius	Button border radius.
--wc-button-font-family	Button font family.
--wc-button-font-weight	Button font weight.
--wc-button-focus-ring-color	Focus ring color.

CSS Parts

1

Part	Description
button	The native button element.