Button

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

Action components convert title into the library tooltip. See Action Tooltips for the shared behavior.

text is the safe default when an action's hierarchy is not known. Use filled only for the single primary, flow-completing action in a surface or action group. Use outlined for important secondary actions and tonal when they need more emphasis than an outline.

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="button"][data-part="root"] left_clickLMBCopy
<span>	leadingconditional	[data-scope="button"][data-part="leading"] left_clickLMBCopy
<span>	trailingconditional	[data-scope="button"][data-part="trailing"] left_clickLMBCopy

Props

Name	Description	Default	Control
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
variantOptional	The visual emphasis of the button. textoutlinedtonalfilledelevated	-	checktextoutlinedtonalfilledelevated
sizeOptional	The size of the button. smalllargeextra-smallmediumextra-large	-	smalllargeextra-smallcheckmediumextra-large
shapeOptional	The shape of the button. roundedsquare	-	checkroundedsquare
pressShapeMorphOptional	Whether pressed-state shape morphing is enabled. boolean | undefined	undefined	check
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

Events0

No events documented.

Slots3

Name	Parameters	Description
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.

Styling123

Preview

Token	Description
--md-button-container-colorColor Fallbackvar(--md-sys-color-primary)	Controls container color.
--md-button-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls container elevation.
--md-button-container-shapeShape Fallbackvar(--md-button-container-shape-round,var(--md-shape-action))	Controls container shape.
--md-button-container-shape-roundShape Fallbackvar(--md-shape-action)	Controls container shape round.
--md-button-container-shape-squareShape Fallbackvar(--md-shape-action-square-small)	Controls container shape square.
--md-button-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled container color.
--md-button-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls disabled container elevation.
--md-button-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled label text color.
--md-button-elevated-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls elevated container color.
--md-button-elevated-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls elevated container elevation.
--md-button-elevated-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls elevated disabled container color.
--md-button-elevated-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls elevated disabled container elevation.
--md-button-elevated-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls elevated disabled label text color.
--md-button-elevated-focused-container-elevationFocus Fallbackvar(--md-sys-elevation-level1)	Controls elevated focused container elevation.
--md-button-elevated-focused-label-text-colorFocus Fallbackvar(--md-sys-color-primary)	Controls elevated focused label text color.
--md-button-elevated-hovered-container-elevationElevation Fallbackvar(--md-sys-elevation-level2)	Controls elevated hovered container elevation.
--md-button-elevated-hovered-label-text-colorState Fallbackvar(--md-sys-color-primary)	Controls elevated hovered label text color.
--md-button-elevated-label-text-colorColor Fallbackvar(--md-sys-color-primary)	Controls elevated label text color.
--md-button-elevated-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls elevated pressed container elevation.
--md-button-elevated-pressed-label-text-colorState Fallbackvar(--md-sys-color-primary)	Controls elevated pressed label text color.
--md-button-elevated-selected-container-colorState Fallbackvar(--md-sys-color-primary)	Controls elevated selected container color.
--md-button-elevated-selected-label-text-colorState Fallbackvar(--md-sys-color-on-primary)	Controls elevated selected label text color.
--md-button-elevated-unselected-container-colorState Fallbackvar(--md-sys-color-surface-container-low)	Controls elevated unselected container color.
--md-button-elevated-unselected-label-text-colorState Fallbackvar(--md-sys-color-primary)	Controls elevated unselected label text color.
--md-button-filled-container-colorColor Fallbackvar(--md-sys-color-primary)	Controls filled container color.
--md-button-filled-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls filled container elevation.
--md-button-filled-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls filled disabled container color.
--md-button-filled-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls filled disabled container elevation.
--md-button-filled-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls filled disabled label text color.
--md-button-filled-focused-container-elevationFocus Fallbackvar(--md-sys-elevation-level0)	Controls filled focused container elevation.
--md-button-filled-focused-label-text-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls filled focused label text color.
--md-button-filled-hovered-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls filled hovered container elevation.
--md-button-filled-hovered-label-text-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled hovered label text color.
--md-button-filled-label-text-colorColor Fallbackvar(--md-sys-color-on-primary)	Controls filled label text color.
--md-button-filled-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls filled pressed container elevation.
--md-button-filled-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled pressed label text color.
--md-button-filled-selected-container-colorState Fallbackvar(--md-sys-color-primary)	Controls filled selected container color.
--md-button-filled-selected-label-text-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled selected label text color.
--md-button-filled-unselected-container-colorState Fallbackvar(--md-sys-color-surface-container)	Controls filled unselected container color.
--md-button-filled-unselected-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls filled unselected label text color.
--md-button-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls focus indicator color.
--md-button-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator outline offset.
--md-button-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-button-focused-container-elevationFocus Fallbackvar(--md-sys-elevation-level0)	Controls focused container elevation.
--md-button-focused-label-text-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls focused label text color.
--md-button-hovered-container-elevationElevation Fallbackvar(--md-button-elevated-hovered-container-elevation,var(--md-sys-elevation-level2))	Controls hovered container elevation.
--md-button-hovered-label-text-colorState Fallbackvar(--md-sys-color-on-primary)	Controls hovered label text color.
--md-button-icon-label-spaceLayout Fallback0.5rem	Controls icon label space.
--md-button-icon-sizeLayout Fallback1.25rem	Controls icon size.
--md-button-label-text-colorColor Fallbackvar(--md-sys-color-on-primary)	Controls label text color.
--md-button-label-text-selected-colorState Fallbackvar(--md-sys-color-on-primary)	Controls label text selected color.
--md-button-label-text-unselected-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls label text unselected color.
--md-button-large-container-shape-squareShape Fallbackvar(--md-shape-action-square-large)	Controls large container shape square.
--md-button-large-icon-label-spaceLayout Fallback0.75rem	Controls large icon label space.
--md-button-large-icon-sizeLayout Fallback2rem	Controls large icon size.
--md-button-large-outlined-outline-widthLayout Fallback0.125rem	Controls large outlined outline width.
--md-button-large-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-large)	Controls large pressed container shape.
--md-button-large-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-large)	Controls large selected container shape round.
--md-button-medium-container-shape-squareShape Fallbackvar(--md-shape-action-square-medium)	Controls medium container shape square.
--md-button-medium-icon-label-spaceLayout Fallback0.5rem	Controls medium icon label space.
--md-button-medium-icon-sizeLayout Fallback1.5rem	Controls medium icon size.
--md-button-medium-outlined-outline-widthLayout Fallback0.0625rem	Controls medium outlined outline width.
--md-button-medium-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-medium)	Controls medium pressed container shape.
--md-button-medium-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-medium)	Controls medium selected container shape round.
--md-button-outlined-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls outlined disabled label text color.
--md-button-outlined-focused-label-text-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined focused label text color.
--md-button-outlined-hovered-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined hovered label text color.
--md-button-outlined-label-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined label text color.
--md-button-outlined-outline-colorColor Fallbackvar(--md-sys-color-outline-variant)	Controls outlined outline color.
--md-button-outlined-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined pressed label text color.
--md-button-outlined-selected-container-colorState Fallbackvar(--md-sys-color-inverse-surface)	Controls outlined selected container color.
--md-button-outlined-selected-label-text-colorState Fallbackvar(--md-sys-color-inverse-on-surface)	Controls outlined selected label text color.
--md-button-outlined-unselected-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined unselected label text color.
--md-button-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls pressed container elevation.
--md-button-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-small)	Controls pressed container shape.
--md-button-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-primary)	Controls pressed label text color.
--md-button-selected-container-colorState Fallbackvar(--md-sys-color-primary)	Controls selected container color.
--md-button-selected-container-shapeShape Fallbackvar(--md-button-xsmall-selected-container-shape-round,var(--md-shape-action-selected-small))	Controls selected container shape.
--md-button-selected-label-text-colorState Fallbackvar(--md-button-elevated-selected-label-text-color,var(--md-sys-color-on-primary))	Controls selected label text color.
--md-button-small-container-shape-squareShape Fallbackvar(--md-shape-action-square-small)	Controls small container shape square.
--md-button-small-icon-label-spaceLayout Fallback0.5rem	Controls small icon label space.
--md-button-small-icon-sizeLayout Fallback1.25rem	Controls small icon size.
--md-button-small-outlined-outline-widthLayout Fallback0.0625rem	Controls small outlined outline width.
--md-button-small-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-small)	Controls small pressed container shape.
--md-button-small-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-small)	Controls small selected container shape round.
--md-button-text-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls text disabled label text color.
--md-button-text-focused-label-text-colorFocus Fallbackvar(--md-sys-color-primary)	Controls text focused label text color.
--md-button-text-hovered-label-text-colorState Fallbackvar(--md-sys-color-primary)	Controls text hovered label text color.
--md-button-text-label-text-colorColor Fallbackvar(--md-sys-color-primary)	Controls text label text color.
--md-button-text-pressed-label-text-colorState Fallbackvar(--md-sys-color-primary)	Controls text pressed label text color.
--md-button-tonal-container-colorColor Fallbackvar(--md-sys-color-secondary-container)	Controls tonal container color.
--md-button-tonal-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls tonal container elevation.
--md-button-tonal-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls tonal disabled container color.
--md-button-tonal-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls tonal disabled container elevation.
--md-button-tonal-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls tonal disabled label text color.
--md-button-tonal-focused-container-elevationFocus Fallbackvar(--md-sys-elevation-level0)	Controls tonal focused container elevation.
--md-button-tonal-focused-label-text-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal focused label text color.
--md-button-tonal-hovered-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls tonal hovered container elevation.
--md-button-tonal-hovered-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal hovered label text color.
--md-button-tonal-label-text-colorColor Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal label text color.
--md-button-tonal-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls tonal pressed container elevation.
--md-button-tonal-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal pressed label text color.
--md-button-tonal-selected-container-colorState Fallbackvar(--md-sys-color-secondary)	Controls tonal selected container color.
--md-button-tonal-selected-label-text-colorState Fallbackvar(--md-sys-color-on-secondary)	Controls tonal selected label text color.
--md-button-tonal-unselected-container-colorState Fallbackvar(--md-sys-color-secondary-container)	Controls tonal unselected container color.
--md-button-tonal-unselected-label-text-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal unselected label text color.
--md-button-unselected-container-colorState Fallbackvar(--md-sys-color-surface-container)	Controls unselected container color.
--md-button-unselected-focused-label-text-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected focused label text color.
--md-button-unselected-hovered-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected hovered label text color.
--md-button-unselected-label-text-colorState Fallbackvar(--md-button-elevated-unselected-label-text-color,var(--md-sys-color-primary))	Controls unselected label text color.
--md-button-unselected-pressed-label-text-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected pressed label text color.
--md-button-xlarge-container-shape-squareShape Fallbackvar(--md-shape-action-square-large)	Controls xlarge container shape square.
--md-button-xlarge-icon-label-spaceLayout Fallback1rem	Controls xlarge icon label space.
--md-button-xlarge-icon-sizeLayout Fallback2.5rem	Controls xlarge icon size.
--md-button-xlarge-outlined-outline-widthLayout Fallback0.1875rem	Controls xlarge outlined outline width.
--md-button-xlarge-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-large)	Controls xlarge pressed container shape.
--md-button-xlarge-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-large)	Controls xlarge selected container shape round.
--md-button-xsmall-container-shape-squareShape Fallbackvar(--md-shape-action-square-small)	Controls xsmall container shape square.
--md-button-xsmall-icon-label-spaceLayout Fallback0.5rem	Controls xsmall icon label space.
--md-button-xsmall-icon-sizeLayout Fallback1.25rem	Controls xsmall icon size.
--md-button-xsmall-outlined-outline-widthLayout Fallback0.0625rem	Controls xsmall outlined outline width.
--md-button-xsmall-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-small)	Controls xsmall pressed container shape.
--md-button-xsmall-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-small)	Controls xsmall selected container shape round.

Examples

Default

Variants

Sizes

Shapes

Disabled

Toggleable

text outlined tonal filled elevated

Leading Icons

The leadingIcon prop and leading slot share the same size and label spacing. Use the slot when the icon content needs custom rendering.

Trailing Icons

The trailingIcon prop and trailing slot use the same trailing alignment contract.

Tooltip

Use title for a simple text tooltip.

Vue Router

Use RouterLink custom and pass its href and navigate values into Button. That keeps Button responsible for rendering the final anchor element.

InboxArchive

Current route: /inbox