Button

Buttons let people trigger primary, secondary, or low-emphasis actions with Material 3 visual treatments.

Props

NameDescriptionDefaultControl
toggleableOptional

Whether the button is toggleable (like a checkbox). When true, the button must contain an input element of type checkbox or radio.

boolean | undefined
undefined
colorOptional

The color style of the button.

elevatedfilledtonaloutlinedtext
-
sizeOptional

The size of the button.

extra-smallsmallmediumlargeextra-large
-
shapeOptional

The shape of the button.

roundedsquare
-
hrefOptional

The href attribute. If provided, the button will be rendered as an anchor element.

string | undefined
-
leadingIconOptional

Name of the leading icon.

string | undefined
-
trailingIconOptional

Name of the trailing icon.

string | undefined
-
disabledOptional

Whether the button is disabled.

boolean | undefined
undefined

Events

No events documented.

Slots

NameParametersDescription
leading-Slot for leading content, such as an icon. Receives `disabled` as a prop. Will not be used if `leadingIcon` prop is set.
default-Default slot for the main content of the button. Receives `disabled` as a prop.
trailing-Slot for trailing content, such as an icon. Receives `disabled` as a prop. Will not be used if `trailingIcon` prop is set.

Default

Colors

Sizes

Shapes

Disabled

Toggleable

Leading Icons

Trailing Icons