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.

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="button"][data-part="root"] left_clickLMBCopy
<Icon>	leadingconditional	[data-scope="button"][data-part="leading"] left_clickLMBCopy
<Icon>	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
colorOptional	The color style of the button. elevatedfilledtonaloutlinedtext	-	elevatedcheckfilledtonaloutlinedtext
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

Colors

Sizes

Shapes

Disabled

Toggleable

elevated filled tonal outlined text

Leading Icons

Trailing Icons

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