Button

A button starts an action, such as Save or Send invitation, or follows a link. Its variant sets how much attention the action draws, so the step that finishes a task stands out from the rest. The buttons below are live, and a few change on a timer.

Cancel

Copy

Edit

Order

Undo

Submit

Updates

Join

Inbox

Download

Pay

Start

Back

Details

Checkout

Paste

Save

Add to cart

Buy

Preview

Skip

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a button⁠

Six components share the button's form. Each suits a different job:

Button: an action with a name, such as Save, Send invitation, or Delete project.
Icon button: an action shown by a relevant icon only, with no label, such as close, share, or more, where space is tight.
Floating action button: the one most important action on a screen, floating above the content.
FAB menu: a floating action button that opens a short set of related actions, such as new message, new call, or new meeting.
Toggle button: a labeled setting that stays on until it is switched off, such as bold or mute.
Toggle icon button: the same two-state setting, shown by an icon only, such as bookmark or favorite.

Two jobs belong elsewhere. Words that take the reader somewhere are a link in the text, and a choice among options is a set of chips, radio buttons, or a select.

Choosing a variant⁠

Five variants set how much attention a button draws. Four run from most to least, and the fifth lifts a button off a busy background:

Filled: the final or unblocking action in a flow, such as Save, Join now, or Confirm.
Tonal: a middle step that still matters, such as Next in an onboarding flow.
Outlined: an important action beside the main one, such as Back or Edit.
Text: the lowest priority, especially among several options, such as Cancel or Learn more.
Elevated: an action that needs a shadow to stand apart from a patterned or photographic background.

Built in⁠

Its touch target is at least 48 by 48 pixels at every size, even when the button paints smaller, unless touch-target is none.
In a form it submits, or resets with type, and sends name and value with the form's data.
With href it becomes a link that a screen reader announces as one, and a disabled link stays announced as a link.
badge-value puts a count on its corner, and badge-concealed hides it while keeping the value.
tooltip-value adds a tooltip that opens on hover and on focus, and a screen reader reads it after the button's name.
soft-disabled blocks the action but keeps the button in the Tab order, so a screen reader still reaches it and reads its tooltip.

Using buttons well⁠

Keep one filled button in a section, for its final or unblocking action, and make the others tonal, outlined, or text.
Place an icon before the label, on the leading side.
Keep a visible label on every button, and move an action that fits only an icon to an icon button with an aria-label.
Keep a setting that stays on until switched off, such as bold or mute, in a toggle button; a button starts its action each time it is pressed.

These rules follow Material 3 Expressive's guidance for buttons, on material.io.

Variants⁠

variant sets how much attention the button draws, from filled for the step that finishes a task to text for the least important of several. Omit it and the button takes the variant from your style configuration, which is text unless you have changed it. The Overview's Choosing a variant says when to use each.

Size⁠

size sets the button's height, corner radius, padding, icon size, and label text, from extra-small to extra-large. Omit it and the button takes the size from your style configuration, which is small unless you have changed it. Use the larger sizes for a single prominent action, such as the start of a flow, and the smaller ones in dense layouts.

Icons⁠

icon-name takes the name of a Material Symbols icon and draws it before the label. For any other icon, put an cw-icon, an img, or an inline svg in the icon slot, which overrides icon-name; the button logs a warning when both are set. A slotted img or svg joins the button's accessible name; Names and states says when to hide it.

An arrow that points the way through a flow should point the other way in a right-to-left layout. flip-icon-in-rtl mirrors an icon-name icon when the text direction is right to left; a slotted icon is never mirrored.

Badges⁠

badge-value puts a short count or label on the button's corner, with no separate element to position. badge-dot shows a small dot instead, for "something new" without a number. badge-concealed hides the badge and keeps its value, so clearing it shows the same badge again, which suits a count that is hidden while its list is open.

The count stays out of the button's accessible name; Names and states says where to put a count that matters.

Tooltips⁠

tooltip-value adds a plain tooltip that opens on hover and on focus. Its text is announced as the button's description, and dropped when it only repeats the label, so write a tooltip that adds something: what the action affects, or a keyboard shortcut.

tooltip-position sets where the tooltip sits relative to the button. Omit it and the button takes the position from your style configuration, which is end-center unless you have changed it.

Links⁠

Set href to make the button a link. A screen reader announces it as a link, and a click follows the address instead of submitting a form. target says where the link opens, and it has no effect without href.

Use a link button where a link has to look like an action, such as Get started at the end of a page. In the demo, the first button moves to a section of the demo. The second asks for a new tab, which the preview's sandbox refuses, so it does nothing here and opens a tab on your page.

Forms⁠

A button in a form submits it: type is submit unless you set it. reset resets the form, and button does nothing to it, for a button that runs your own code. When a submit button carries name and value, the form's data includes that pair, so one form with two submit buttons can tell which was pressed.

The preview runs in a sandbox that blocks form submission, so the demo shows its result from each button's click, as a page's own handler would.

Disabled and soft-disabled⁠

disabled takes the button out of the Tab order, so nothing can focus or activate it. Use it when the action is unavailable and nobody needs to find out why.

soft-disabled blocks the action but keeps the button focusable, and marks it disabled for a screen reader. Use it when the reader should still reach the button and learn why it is unavailable. The tooltip is announced as the button's description, so a tooltip that gives the reason is heard on focus. A disabled button never receives focus, so its tooltip is never announced.

In a dialog⁠

A dialog's actions sit in its actions slot, with the dismissing action first and the confirming action last. The actions sit outside the form in the dialog's content, so the submitting button names the form with its form attribute. With method="dialog" on the form, submitting it closes the dialog, and the dialog's return value is the button's value.

The preview's sandbox blocks the submit, so each button in the demo closes the dialog from its click.

Properties⁠

Property	Attribute	Type	Description
`badgeConcealed`	`badge-concealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`badge-dot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`badge-value`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`disabled`	`boolean`default `false`	Disables the button: it leaves the Tab order and cannot be focused or activated. See Disabled and soft-disabled.
`download`	`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`flip-icon-in-rtl`	`boolean`default `false`	Mirrors the `iconName` icon when the text direction is right to left. An icon in the `icon` slot is not mirrored. See Icons.
`form`read-only		`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`href`	`href`	`string`	The URL that the link button points to. When set, the button is a link: a screen reader announces it as one, and a click follows the URL instead of submitting or resetting its form. A disabled or soft-disabled link button cannot be followed. See Links.
`iconName`	`icon-name`	`string`	The name of a Material Symbols icon, shown before the label. The `icon` slot overrides it, and the button logs a warning when both are set. See Icons.
`name`	`name`	`string`	The name the button's `value` is submitted under when the button submits a form. See Forms.
`rel`	`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`size`	`sizeextra-small`, `small`, `medium`, `large`, `extra-large`	`SizeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.Small`, from the style configuration	The button's size, from `extra-small` to `extra-large`. It sets the button's height, corner radius, padding, icon size, and the label's text style. See Size.
`softDisabled`	`soft-disabled`	`boolean`default `false`	Disables the button but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and a click on it does nothing and does not bubble past the button; a capture-phase listener still receives it. Use it when a disabled button must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`target_blank`, `_self`, `_parent`, `_top`, `""`	`UrlTargetUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where a link button opens `href`. It has no effect without `href`. Empty, the link opens in the same tab. See Links.
`tooltipPosition`	`tooltip-positionstart-start`, `start-center`, `start-end`, `center-start`, `center-end`, `end-start`, `end-center`, `end-end`	`TooltipPositionTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`tooltip-value`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`touch-targetnone`, `overflow`, `wrapper`	`TouchTargetTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	How the button's touch target is sized. Except with `none`, the target is at least 48 by 48 pixels. `overflow`: the button keeps its visual size, and the touch target extends past it. `wrapper`: the button takes the touch target's size, around its visual size. `none`: the touch target is the button's visual size.
`type`	`typebutton`, `reset`, `submit`	`FormSubmitterBehaviorFormSubmitterBehavior.Button`, `.Reset`, `.Submit`default `FormSubmitterBehavior.Submit`	What a click does to the button's form: `submit` submits it, `reset` resets it, and `button` does nothing. It has no effect on a link button or outside a form. See Forms.
`value`	`value`	`string`	The value added to a form with the button's name when the button submits a form. See Forms, In a dialog.
`variant`	`variantelevated`, `filled`, `tonal`, `outlined`, `text`	`ButtonVariantButtonVariant.Elevated`, `.Filled`, `.Tonal`, `.Outlined`, `.Text`default `ButtonVariant.Text`, from the style configuration	The button's emphasis. Each variant sets the container's color, outline, and shadow, and the label's color. See Variants.

Slots⁠

Slot	Description
(default)	The button's label. A button without one logs a warning: an icon-only button is `cw-icon-button`.
`icon`	The icon shown before the label: a `cw-icon`, an `img` element, or an inline `svg`. It overrides `iconName`.

Events⁠

Event	Type	Detail	Description
`click`	`MouseEvent`	—	Dispatched when the button is clicked. A disabled or soft-disabled button does not dispatch it. It bubbles, is composed, and is cancelable.
`link-activate`	`LinkActivateEvent`	`LinkActivateEventDetail`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable.

A click that a listener cancels with preventDefault() neither submits nor resets the form.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Disables the button: it leaves the Tab order and cannot be focused or activated. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Mirrors the `iconName` icon when the text direction is right to left. An icon in the `slot="icon"` child is not mirrored. See Icons.
`form`read-only (ref)	`HTMLFormElement`	The form the component belongs to, or `null` when it has none.
`href`	`string`	The URL that the link button points to. When set, the button is a link: a screen reader announces it as one, and a click follows the URL instead of submitting or resetting its form. A disabled or soft-disabled link button cannot be followed. See Links.
`iconName`	`string`	The name of a Material Symbols icon, shown before the label. The `slot="icon"` child overrides it, and the button logs a warning when both are set. See Icons.
`name`	`string`	The name the button's `value` is submitted under when the button submits a form. See Forms.
`onNavigate`	`(detail: LinkActivateEventDetail, event: LinkActivateEvent) => void`	Called when the link points inside the app: the same origin, opening in the same tab. The browser's navigation is canceled first, so this handler navigates, and it replaces the navigation `ChameleonRouterProvider` would make.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.Small`, from the style configuration	The button's size, from `extra-small` to `extra-large`. It sets the button's height, corner radius, padding, icon size, and the label's text style. See Size.
`softDisabled`	`boolean`default `false`	Disables the button but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and a click on it does nothing and does not bubble past the button; a capture-phase listener still receives it. Use it when a disabled button must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where a link button opens `href`. It has no effect without `href`. Empty, the link opens in the same tab. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	How the button's touch target is sized. Except with `none`, the target is at least 48 by 48 pixels. `overflow`: the button keeps its visual size, and the touch target extends past it. `wrapper`: the button takes the touch target's size, around its visual size. `none`: the touch target is the button's visual size.
`type`	`FormSubmitterBehaviorTypeFormSubmitterBehavior.Button`, `.Reset`, `.Submit`default `FormSubmitterBehavior.Submit`	What a click does to the button's form: `submit` submits it, `reset` resets it, and `button` does nothing. It has no effect on a link button or outside a form. See Forms.
`value`	`string`	The value added to a form with the button's name when the button submits a form. See Forms, In a dialog.
`variant`	`ButtonVariantTypeButtonVariant.Elevated`, `.Filled`, `.Tonal`, `.Outlined`, `.Text`default `ButtonVariant.Text`, from the style configuration	The button's emphasis. Each variant sets the container's color, outline, and shadow, and the label's color. See Variants.

Children⁠

Child	Description
`children`	The button's label. A button without one logs a warning: an icon-only button is `CrIconButton`.
a child with `slot="icon"`	The icon shown before the label: a `CrIcon`, an `img` element, or an inline `svg`. It overrides `iconName`.

Events⁠

Prop	Argument	Description
`onClick`	`React.MouseEvent<HTMLElement>`	Dispatched when the button is clicked. A disabled or soft-disabled button does not dispatch it. It bubbles, is composed, and is cancelable.
`onLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A click that a listener cancels with preventDefault() neither submits nor resets the form.

Parameters⁠

Parameter	Type	Description
`BadgeConcealed`	`bool?`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`BadgeDot`	`bool?`default `false`	Shows the badge as a small dot with no text, whether or not `BadgeValue` is set. See Badges.
`BadgeValue`	`string?`	The badge's text. While it is empty and `BadgeDot` is not set, no badge renders. Ignored if `BadgeDot` is set. See Badges.
`Disabled`	`bool?`default `false`	Disables the button: it leaves the Tab order and cannot be focused or activated. See Disabled and soft-disabled.
`Download`	`string?`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `Href` is set.
`FlipIconInRtl`	`bool?`default `false`	Mirrors the `IconName` icon when the text direction is right to left. An icon in the `Icon` render fragment is not mirrored. See Icons.
`Href`	`string?`	The URL that the link button points to. When set, the button is a link: a screen reader announces it as one, and a click follows the URL instead of submitting or resetting its form. A disabled or soft-disabled link button cannot be followed. See Links.
`IconName`	`string?`	The name of a Material Symbols icon, shown before the label. The `Icon` render fragment overrides it, and the button logs a warning when both are set. See Icons.
`Name`	`string?`	The name the button's `Value` is submitted under when the button submits a form. See Forms.
`OnNavigate`	`EventCallback<LinkActivateEventArgs>`	Navigates for a link that points inside the app: the same base address, opening in the same tab. The browser's navigation is canceled first, and this callback replaces the NavigationManager.NavigateTo the component calls by default. It is not called for any other link.
`Rel`	`string?`	The link's relationship to the linked URL, as the anchor's `Rel`, used exactly as given. Unset, the anchor has no `Rel`. Ignored unless `Href` is set.
`Size`	`Size?Size.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.Small`, from the style configuration	The button's size, from `extra-small` to `extra-large`. It sets the button's height, corner radius, padding, icon size, and the label's text style. See Size.
`SoftDisabled`	`bool?`default `false`	Disables the button but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and a click on it does nothing and does not bubble past the button; a capture-phase listener still receives it. Use it when a disabled button must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`Target`	`UrlTarget?UrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where a link button opens `Href`. It has no effect without `Href`. Empty, the link opens in the same tab. See Links.
`TooltipPosition`	`TooltipPosition?TooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `TooltipValue`. See Tooltips.
`TooltipValue`	`string?`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`TouchTarget`	`TouchTarget?TouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	How the button's touch target is sized. Except with `none`, the target is at least 48 by 48 pixels. `overflow`: the button keeps its visual size, and the touch target extends past it. `wrapper`: the button takes the touch target's size, around its visual size. `none`: the touch target is the button's visual size.
`Type`	`FormSubmitterBehavior?FormSubmitterBehavior.Button`, `.Reset`, `.Submit`default `FormSubmitterBehavior.Submit`	What a click does to the button's form: `submit` submits it, `reset` resets it, and `button` does nothing. It has no effect on a link button or outside a form. See Forms.
`Value`	`string?`	The value added to a form with the button's name when the button submits a form. See Forms, In a dialog.
`Variant`	`ButtonVariant?ButtonVariant.Elevated`, `.Filled`, `.Tonal`, `.Outlined`, `.Text`default `ButtonVariant.Text`, from the style configuration	The button's emphasis. Each variant sets the container's color, outline, and shadow, and the label's color. See Variants.

Render fragments⁠

Once you write Icon or any other fragment as a child element, the main content must go in an explicit <ChildContent> too; markup beside <Icon> is a compile error. Here ChildContent is: The button's label.

<CbButton>
    <Icon><CbIcon>favorite</CbIcon></Icon>
    <ChildContent>Main content</ChildContent>
</CbButton>

content_copy

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The button's label. A button without one logs a warning: an icon-only button is `CbIconButton`.
`Icon`	`RenderFragment?`	The icon shown before the label: a `CbIcon`, an `img` element, or an inline `svg`. It overrides `IconName`.

Event callbacks⁠

Parameter	Type	Description
`OnClick`	`EventCallback<MouseEventArgs>`	Dispatched when the button is clicked. A disabled or soft-disabled button does not dispatch it. It bubbles, is composed, and is cancelable.
`OnLinkActivate`	`EventCallback<LinkActivateEventArgs>`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `Href`, `Target`, `Download`, `Rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A click that a listener cancels with preventDefault() neither submits nor resets the form.

Inputs⁠

Input	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Disables the button: it leaves the Tab order and cannot be focused or activated. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Mirrors the `iconName` icon when the text direction is right to left. An icon in the `icon` slot is not mirrored. See Icons.
`href`	`string`	The URL that the link button points to. When set, the button is a link: a screen reader announces it as one, and a click follows the URL instead of submitting or resetting its form. A disabled or soft-disabled link button cannot be followed. See Links.
`iconName`	`string`	The name of a Material Symbols icon, shown before the label. The `icon` slot overrides it, and the button logs a warning when both are set. See Icons.
`name`	`string`	The name the button's `value` is submitted under when the button submits a form. See Forms.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.Small`, from the style configuration	The button's size, from `extra-small` to `extra-large`. It sets the button's height, corner radius, padding, icon size, and the label's text style. See Size.
`softDisabled`	`boolean`default `false`	Disables the button but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and a click on it does nothing and does not bubble past the button; a capture-phase listener still receives it. Use it when a disabled button must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where a link button opens `href`. It has no effect without `href`. Empty, the link opens in the same tab. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	How the button's touch target is sized. Except with `none`, the target is at least 48 by 48 pixels. `overflow`: the button keeps its visual size, and the touch target extends past it. `wrapper`: the button takes the touch target's size, around its visual size. `none`: the touch target is the button's visual size.
`type`	`FormSubmitterBehaviorTypeFormSubmitterBehavior.Button`, `.Reset`, `.Submit`default `FormSubmitterBehavior.Submit`	What a click does to the button's form: `submit` submits it, `reset` resets it, and `button` does nothing. It has no effect on a link button or outside a form. See Forms.
`value`	`string`	The value added to a form with the button's name when the button submits a form. See Forms, In a dialog.
`variant`	`ButtonVariantTypeButtonVariant.Elevated`, `.Filled`, `.Tonal`, `.Outlined`, `.Text`default `ButtonVariant.Text`, from the style configuration	The button's emphasis. Each variant sets the container's color, outline, and shadow, and the label's color. See Variants.

Content projection⁠

Content	Description
content with no `slot`	The button's label. A button without one logs a warning: an icon-only button is `CaIconButton`.
an element with `slot="icon"`	The icon shown before the label: a `CaIcon`, an `img` element, or an inline `svg`. It overrides `iconName`.

Outputs⁠

Output	Event	Description
`cwClick`	`MouseEvent`	Dispatched when the button is clicked. A disabled or soft-disabled button does not dispatch it. It bubbles, is composed, and is cancelable.
`cwLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A click that a listener cancels with preventDefault() neither submits nor resets the form.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Disables the button: it leaves the Tab order and cannot be focused or activated. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Mirrors the `iconName` icon when the text direction is right to left. An icon in the `icon` slot is not mirrored. See Icons.
`href`	`string`	The URL that the link button points to. When set, the button is a link: a screen reader announces it as one, and a click follows the URL instead of submitting or resetting its form. A disabled or soft-disabled link button cannot be followed. See Links.
`iconName`	`string`	The name of a Material Symbols icon, shown before the label. The `icon` slot overrides it, and the button logs a warning when both are set. See Icons.
`name`	`string`	The name the button's `value` is submitted under when the button submits a form. See Forms.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.Small`, from the style configuration	The button's size, from `extra-small` to `extra-large`. It sets the button's height, corner radius, padding, icon size, and the label's text style. See Size.
`softDisabled`	`boolean`default `false`	Disables the button but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and a click on it does nothing and does not bubble past the button; a capture-phase listener still receives it. Use it when a disabled button must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where a link button opens `href`. It has no effect without `href`. Empty, the link opens in the same tab. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	How the button's touch target is sized. Except with `none`, the target is at least 48 by 48 pixels. `overflow`: the button keeps its visual size, and the touch target extends past it. `wrapper`: the button takes the touch target's size, around its visual size. `none`: the touch target is the button's visual size.
`type`	`FormSubmitterBehaviorTypeFormSubmitterBehavior.Button`, `.Reset`, `.Submit`default `FormSubmitterBehavior.Submit`	What a click does to the button's form: `submit` submits it, `reset` resets it, and `button` does nothing. It has no effect on a link button or outside a form. See Forms.
`value`	`string`	The value added to a form with the button's name when the button submits a form. See Forms, In a dialog.
`variant`	`ButtonVariantTypeButtonVariant.Elevated`, `.Filled`, `.Tonal`, `.Outlined`, `.Text`default `ButtonVariant.Text`, from the style configuration	The button's emphasis. Each variant sets the container's color, outline, and shadow, and the label's color. See Variants.

Slots⁠

Slot	Description
`default`	The button's label. A button without one logs a warning: an icon-only button is `CvIconButton`.
`icon`	The icon shown before the label: a `CvIcon`, an `img` element, or an inline `svg`. It overrides `iconName`.

Events⁠

Event	Type	Description
`click`	`MouseEvent`	Dispatched when the button is clicked. A disabled or soft-disabled button does not dispatch it. It bubbles, is composed, and is cancelable.
`linkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A click that a listener cancels with preventDefault() neither submits nor resets the form.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Disables the button: it leaves the Tab order and cannot be focused or activated. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Mirrors the `iconName` icon when the text direction is right to left. An icon in the `iconSnippet` snippet is not mirrored. See Icons.
`href`	`string`	The URL that the link button points to. When set, the button is a link: a screen reader announces it as one, and a click follows the URL instead of submitting or resetting its form. A disabled or soft-disabled link button cannot be followed. See Links.
`iconName`	`string`	The name of a Material Symbols icon, shown before the label. The `iconSnippet` snippet overrides it, and the button logs a warning when both are set. See Icons.
`name`	`string`	The name the button's `value` is submitted under when the button submits a form. See Forms.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set.
`size`	`SizeTypeSize.ExtraSmall`, `.Small`, `.Medium`, `.Large`, `.ExtraLarge`default `Size.Small`, from the style configuration	The button's size, from `extra-small` to `extra-large`. It sets the button's height, corner radius, padding, icon size, and the label's text style. See Size.
`softDisabled`	`boolean`default `false`	Disables the button but keeps it focusable and in the Tab order. It carries `aria-disabled="true"`, and a click on it does nothing and does not bubble past the button; a capture-phase listener still receives it. Use it when a disabled button must stay reachable by keyboard and screen reader. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where a link button opens `href`. It has no effect without `href`. Empty, the link opens in the same tab. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	How the button's touch target is sized. Except with `none`, the target is at least 48 by 48 pixels. `overflow`: the button keeps its visual size, and the touch target extends past it. `wrapper`: the button takes the touch target's size, around its visual size. `none`: the touch target is the button's visual size.
`type`	`FormSubmitterBehaviorTypeFormSubmitterBehavior.Button`, `.Reset`, `.Submit`default `FormSubmitterBehavior.Submit`	What a click does to the button's form: `submit` submits it, `reset` resets it, and `button` does nothing. It has no effect on a link button or outside a form. See Forms.
`value`	`string`	The value added to a form with the button's name when the button submits a form. See Forms, In a dialog.
`variant`	`ButtonVariantTypeButtonVariant.Elevated`, `.Filled`, `.Tonal`, `.Outlined`, `.Text`default `ButtonVariant.Text`, from the style configuration	The button's emphasis. Each variant sets the container's color, outline, and shadow, and the label's color. See Variants.

Snippets⁠

Snippet	Description
`children`	The button's label. A button without one logs a warning: an icon-only button is `CsIconButton`.
`iconSnippet`	The icon shown before the label: a `CsIcon`, an `img` element, or an inline `svg`. It overrides `iconName`.

Events⁠

Prop	Type	Description
`onClick`	`MouseEvent`	Dispatched when the button is clicked. A disabled or soft-disabled button does not dispatch it. It bubbles, is composed, and is cancelable.
`onLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A click that a listener cancels with preventDefault() neither submits nor resets the form.

Each attribute value has its own tokens; a cell shows its token's value, and selecting the cell shows the token's fallback path, with each name and value ready to copy. For example, the text column's container-color row is --ct-button-text-container-color, which defaults to transparent.

Variant⁠

Name	`elevated`	`filled`	`outlined`	`text`	`tonal`
`container-color`	`--ct-sys-color-surface-container-low` `--ct-button-elevated-container-color`	`--ct-sys-color-primary` `--ct-button-filled-container-color`	`transparent` `--ct-button-outlined-container-color`	`transparent` `--ct-button-text-container-color`	`--ct-sys-color-secondary-container` `--ct-button-tonal-container-color`
`container-elevation`	`1` `--ct-button-elevated-container-elevation`	`0` `--ct-button-filled-container-elevation`	`0` `--ct-button-outlined-container-elevation`	`0` `--ct-button-text-container-elevation`	`0` `--ct-button-tonal-container-elevation`
`icon-color`	`--ct-sys-color-primary` `--ct-button-elevated-icon-color`	`--ct-sys-color-on-primary` `--ct-button-filled-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-icon-color`	`--ct-sys-color-primary` `--ct-button-text-icon-color`	`--ct-sys-color-on-secondary-container` `--ct-button-tonal-icon-color`
`label-text-color`	`--ct-sys-color-primary` `--ct-button-elevated-label-text-color`	`--ct-sys-color-on-primary` `--ct-button-filled-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-label-text-color`	`--ct-sys-color-primary` `--ct-button-text-label-text-color`	`--ct-sys-color-on-secondary-container` `--ct-button-tonal-label-text-color`
`outline-color`	`transparent` `--ct-button-elevated-outline-color`	`transparent` `--ct-button-filled-outline-color`	`--ct-sys-color-outline-variant` `--ct-button-outlined-outline-color`	`transparent` `--ct-button-text-outline-color`	`transparent` `--ct-button-tonal-outline-color`
`state-layer-color`	`--ct-sys-color-primary` `--ct-button-elevated-state-layer-color`	`--ct-sys-color-on-primary` `--ct-button-filled-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-state-layer-color`	`--ct-sys-color-primary` `--ct-button-text-state-layer-color`	`--ct-sys-color-on-secondary-container` `--ct-button-tonal-state-layer-color`
`hover-icon-color`	same as `icon-color` `--ct-button-elevated-hover-icon-color`	same as `icon-color` `--ct-button-filled-hover-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-hover-icon-color`	same as `icon-color` `--ct-button-text-hover-icon-color`	same as `icon-color` `--ct-button-tonal-hover-icon-color`
`hover-label-text-color`	same as `label-text-color` `--ct-button-elevated-hover-label-text-color`	same as `label-text-color` `--ct-button-filled-hover-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-hover-label-text-color`	same as `label-text-color` `--ct-button-text-hover-label-text-color`	same as `label-text-color` `--ct-button-tonal-hover-label-text-color`
`hover-state-layer-color`	same as `state-layer-color` `--ct-button-elevated-hover-state-layer-color`	same as `state-layer-color` `--ct-button-filled-hover-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-hover-state-layer-color`	same as `state-layer-color` `--ct-button-text-hover-state-layer-color`	same as `state-layer-color` `--ct-button-tonal-hover-state-layer-color`
`hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-button-elevated-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-button-filled-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-button-outlined-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-button-text-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-button-tonal-hover-state-layer-opacity`
`focus-icon-color`	same as `icon-color` `--ct-button-elevated-focus-icon-color`	same as `icon-color` `--ct-button-filled-focus-icon-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-focus-icon-color`	same as `icon-color` `--ct-button-text-focus-icon-color`	same as `icon-color` `--ct-button-tonal-focus-icon-color`
`focus-label-text-color`	same as `label-text-color` `--ct-button-elevated-focus-label-text-color`	same as `label-text-color` `--ct-button-filled-focus-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-focus-label-text-color`	same as `label-text-color` `--ct-button-text-focus-label-text-color`	same as `label-text-color` `--ct-button-tonal-focus-label-text-color`
`pressed-label-text-color`	same as `label-text-color` `--ct-button-elevated-pressed-label-text-color`	same as `label-text-color` `--ct-button-filled-pressed-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-pressed-label-text-color`	same as `label-text-color` `--ct-button-text-pressed-label-text-color`	same as `label-text-color` `--ct-button-tonal-pressed-label-text-color`
`pressed-state-layer-color`	same as `state-layer-color` `--ct-button-elevated-pressed-state-layer-color`	same as `state-layer-color` `--ct-button-filled-pressed-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-button-outlined-pressed-state-layer-color`	same as `state-layer-color` `--ct-button-text-pressed-state-layer-color`	same as `state-layer-color` `--ct-button-tonal-pressed-state-layer-color`
`pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-button-elevated-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-button-filled-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-button-outlined-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-button-text-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-button-tonal-pressed-state-layer-opacity`
`disabled-container-color`	`--ct-sys-color-on-surface` `--ct-button-elevated-disabled-container-color`	`--ct-sys-color-on-surface` `--ct-button-filled-disabled-container-color`	`transparent` `--ct-button-outlined-disabled-container-color`	`transparent` `--ct-button-text-disabled-container-color`	`--ct-sys-color-on-surface` `--ct-button-tonal-disabled-container-color`
`disabled-container-elevation`	`0` `--ct-button-elevated-disabled-container-elevation`	`0` `--ct-button-filled-disabled-container-elevation`	`0` `--ct-button-outlined-disabled-container-elevation`	`0` `--ct-button-text-disabled-container-elevation`	`0` `--ct-button-tonal-disabled-container-elevation`
`disabled-container-opacity`	`0.1` `--ct-button-elevated-disabled-container-opacity`	`0.1` `--ct-button-filled-disabled-container-opacity`	`0` `--ct-button-outlined-disabled-container-opacity`	`0` `--ct-button-text-disabled-container-opacity`	`0.1` `--ct-button-tonal-disabled-container-opacity`
`disabled-icon-color`	`--ct-sys-color-on-surface` `--ct-button-elevated-disabled-icon-color`	`--ct-sys-color-on-surface` `--ct-button-filled-disabled-icon-color`	`--ct-sys-color-on-surface` `--ct-button-outlined-disabled-icon-color`	`--ct-sys-color-on-surface` `--ct-button-text-disabled-icon-color`	`--ct-sys-color-on-surface` `--ct-button-tonal-disabled-icon-color`
`disabled-icon-opacity`	`0.38` `--ct-button-elevated-disabled-icon-opacity`	`0.38` `--ct-button-filled-disabled-icon-opacity`	`0.38` `--ct-button-outlined-disabled-icon-opacity`	`0.38` `--ct-button-text-disabled-icon-opacity`	`0.38` `--ct-button-tonal-disabled-icon-opacity`
`disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-button-elevated-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-button-filled-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-button-outlined-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-button-text-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-button-tonal-disabled-label-text-color`
`disabled-label-text-opacity`	`0.38` `--ct-button-elevated-disabled-label-text-opacity`	`0.38` `--ct-button-filled-disabled-label-text-opacity`	`0.38` `--ct-button-outlined-disabled-label-text-opacity`	`0.38` `--ct-button-text-disabled-label-text-opacity`	`0.38` `--ct-button-tonal-disabled-label-text-opacity`
`disabled-outline-color`	same as `outline-color` `--ct-button-elevated-disabled-outline-color`	same as `outline-color` `--ct-button-filled-disabled-outline-color`	`--ct-sys-color-outline-variant` `--ct-button-outlined-disabled-outline-color`	same as `outline-color` `--ct-button-text-disabled-outline-color`	same as `outline-color` `--ct-button-tonal-disabled-outline-color`
`disabled-outline-opacity`	`0.38` `--ct-button-elevated-disabled-outline-opacity`	`0.38` `--ct-button-filled-disabled-outline-opacity`	`0.38` `--ct-button-outlined-disabled-outline-opacity`	`0.38` `--ct-button-text-disabled-outline-opacity`	`0.38` `--ct-button-tonal-disabled-outline-opacity`
`large-outline-width`	`0px` `--ct-button-elevated-large-outline-width`	`0px` `--ct-button-filled-large-outline-width`	`2px` `--ct-button-outlined-large-outline-width`	`0px` `--ct-button-text-large-outline-width`	`0px` `--ct-button-tonal-large-outline-width`
`medium-outline-width`	`0px` `--ct-button-elevated-medium-outline-width`	`0px` `--ct-button-filled-medium-outline-width`	`1px` `--ct-button-outlined-medium-outline-width`	`0px` `--ct-button-text-medium-outline-width`	`0px` `--ct-button-tonal-medium-outline-width`
`small-outline-width`	`0px` `--ct-button-elevated-small-outline-width`	`0px` `--ct-button-filled-small-outline-width`	`1px` `--ct-button-outlined-small-outline-width`	`0px` `--ct-button-text-small-outline-width`	`0px` `--ct-button-tonal-small-outline-width`
`xlarge-outline-width`	`0px` `--ct-button-elevated-xlarge-outline-width`	`0px` `--ct-button-filled-xlarge-outline-width`	`3px` `--ct-button-outlined-xlarge-outline-width`	`0px` `--ct-button-text-xlarge-outline-width`	`0px` `--ct-button-tonal-xlarge-outline-width`
`xsmall-outline-width`	`0px` `--ct-button-elevated-xsmall-outline-width`	`0px` `--ct-button-filled-xsmall-outline-width`	`1px` `--ct-button-outlined-xsmall-outline-width`	`0px` `--ct-button-text-xsmall-outline-width`	`0px` `--ct-button-tonal-xsmall-outline-width`

Size⁠

Token names spell extra-small as xsmall and extra-large as xlarge.

Name	`extra-small`	`small`	`medium`	`large`	`extra-large`
`container-height`	`32px` `--ct-button-xsmall-container-height`	`40px` `--ct-button-small-container-height`	`56px` `--ct-button-medium-container-height`	`96px` `--ct-button-large-container-height`	`136px` `--ct-button-xlarge-container-height`
`corner-end-end-radius`	same as `corner-radius` `--ct-button-xsmall-corner-end-end-radius`	same as `corner-radius` `--ct-button-small-corner-end-end-radius`	same as `corner-radius` `--ct-button-medium-corner-end-end-radius`	same as `corner-radius` `--ct-button-large-corner-end-end-radius`	same as `corner-radius` `--ct-button-xlarge-corner-end-end-radius`
`corner-end-start-radius`	same as `corner-radius` `--ct-button-xsmall-corner-end-start-radius`	same as `corner-radius` `--ct-button-small-corner-end-start-radius`	same as `corner-radius` `--ct-button-medium-corner-end-start-radius`	same as `corner-radius` `--ct-button-large-corner-end-start-radius`	same as `corner-radius` `--ct-button-xlarge-corner-end-start-radius`
`corner-radius`	`--ct-sys-corner-radius-full` `--ct-button-xsmall-corner-radius`	`--ct-sys-corner-radius-full` `--ct-button-small-corner-radius`	`--ct-sys-corner-radius-full` `--ct-button-medium-corner-radius`	`--ct-sys-corner-radius-full` `--ct-button-large-corner-radius`	`--ct-sys-corner-radius-full` `--ct-button-xlarge-corner-radius`
`corner-start-end-radius`	same as `corner-radius` `--ct-button-xsmall-corner-start-end-radius`	same as `corner-radius` `--ct-button-small-corner-start-end-radius`	same as `corner-radius` `--ct-button-medium-corner-start-end-radius`	same as `corner-radius` `--ct-button-large-corner-start-end-radius`	same as `corner-radius` `--ct-button-xlarge-corner-start-end-radius`
`corner-start-start-radius`	same as `corner-radius` `--ct-button-xsmall-corner-start-start-radius`	same as `corner-radius` `--ct-button-small-corner-start-start-radius`	same as `corner-radius` `--ct-button-medium-corner-start-start-radius`	same as `corner-radius` `--ct-button-large-corner-start-start-radius`	same as `corner-radius` `--ct-button-xlarge-corner-start-start-radius`
`icon-label-space`	`8px` `--ct-button-xsmall-icon-label-space`	`8px` `--ct-button-small-icon-label-space`	`8px` `--ct-button-medium-icon-label-space`	`12px` `--ct-button-large-icon-label-space`	`16px` `--ct-button-xlarge-icon-label-space`
`icon-size`	`20px` `--ct-button-xsmall-icon-size`	`20px` `--ct-button-small-icon-size`	`24px` `--ct-button-medium-icon-size`	`32px` `--ct-button-large-icon-size`	`40px` `--ct-button-xlarge-icon-size`
`label-text-font`	`--ct-sys-typescale-label-large-font` `--ct-button-xsmall-label-text-font`	`--ct-sys-typescale-label-large-font` `--ct-button-small-label-text-font`	`--ct-sys-typescale-title-medium-font` `--ct-button-medium-label-text-font`	`--ct-sys-typescale-headline-small-font` `--ct-button-large-label-text-font`	`--ct-sys-typescale-headline-large-font` `--ct-button-xlarge-label-text-font`
`label-text-line-height`	`--ct-sys-typescale-label-large-line-height` `--ct-button-xsmall-label-text-line-height`	`--ct-sys-typescale-label-large-line-height` `--ct-button-small-label-text-line-height`	`--ct-sys-typescale-title-medium-line-height` `--ct-button-medium-label-text-line-height`	`--ct-sys-typescale-headline-small-line-height` `--ct-button-large-label-text-line-height`	`--ct-sys-typescale-headline-large-line-height` `--ct-button-xlarge-label-text-line-height`
`label-text-size`	`--ct-sys-typescale-label-large-size` `--ct-button-xsmall-label-text-size`	`--ct-sys-typescale-label-large-size` `--ct-button-small-label-text-size`	`--ct-sys-typescale-title-medium-size` `--ct-button-medium-label-text-size`	`--ct-sys-typescale-headline-small-size` `--ct-button-large-label-text-size`	`--ct-sys-typescale-headline-large-size` `--ct-button-xlarge-label-text-size`
`label-text-tracking`	`--ct-sys-typescale-label-large-tracking` `--ct-button-xsmall-label-text-tracking`	`--ct-sys-typescale-label-large-tracking` `--ct-button-small-label-text-tracking`	`--ct-sys-typescale-title-medium-tracking` `--ct-button-medium-label-text-tracking`	`--ct-sys-typescale-headline-small-tracking` `--ct-button-large-label-text-tracking`	`--ct-sys-typescale-headline-large-tracking` `--ct-button-xlarge-label-text-tracking`
`label-text-weight`	`--ct-sys-typescale-label-large-weight` `--ct-button-xsmall-label-text-weight`	`--ct-sys-typescale-label-large-weight` `--ct-button-small-label-text-weight`	`--ct-sys-typescale-title-medium-weight` `--ct-button-medium-label-text-weight`	`--ct-sys-typescale-headline-small-weight` `--ct-button-large-label-text-weight`	`--ct-sys-typescale-headline-large-weight` `--ct-button-xlarge-label-text-weight`
`leading-space`	`12px` `--ct-button-xsmall-leading-space`	`16px` `--ct-button-small-leading-space`	`24px` `--ct-button-medium-leading-space`	`48px` `--ct-button-large-leading-space`	`64px` `--ct-button-xlarge-leading-space`
`trailing-space`	`12px` `--ct-button-xsmall-trailing-space`	`16px` `--ct-button-small-trailing-space`	`24px` `--ct-button-medium-trailing-space`	`48px` `--ct-button-large-trailing-space`	`64px` `--ct-button-xlarge-trailing-space`
`pressed-corner-end-end-radius`	same as `pressed-corner-radius` `--ct-button-xsmall-pressed-corner-end-end-radius`	same as `pressed-corner-radius` `--ct-button-small-pressed-corner-end-end-radius`	same as `pressed-corner-radius` `--ct-button-medium-pressed-corner-end-end-radius`	same as `pressed-corner-radius` `--ct-button-large-pressed-corner-end-end-radius`	same as `pressed-corner-radius` `--ct-button-xlarge-pressed-corner-end-end-radius`
`pressed-corner-end-start-radius`	same as `pressed-corner-radius` `--ct-button-xsmall-pressed-corner-end-start-radius`	same as `pressed-corner-radius` `--ct-button-small-pressed-corner-end-start-radius`	same as `pressed-corner-radius` `--ct-button-medium-pressed-corner-end-start-radius`	same as `pressed-corner-radius` `--ct-button-large-pressed-corner-end-start-radius`	same as `pressed-corner-radius` `--ct-button-xlarge-pressed-corner-end-start-radius`
`pressed-corner-radius`	`--ct-sys-corner-radius-small` `--ct-button-xsmall-pressed-corner-radius`	`--ct-sys-corner-radius-small` `--ct-button-small-pressed-corner-radius`	`--ct-sys-corner-radius-medium` `--ct-button-medium-pressed-corner-radius`	`--ct-sys-corner-radius-large` `--ct-button-large-pressed-corner-radius`	`--ct-sys-corner-radius-large` `--ct-button-xlarge-pressed-corner-radius`
`pressed-corner-start-end-radius`	same as `pressed-corner-radius` `--ct-button-xsmall-pressed-corner-start-end-radius`	same as `pressed-corner-radius` `--ct-button-small-pressed-corner-start-end-radius`	same as `pressed-corner-radius` `--ct-button-medium-pressed-corner-start-end-radius`	same as `pressed-corner-radius` `--ct-button-large-pressed-corner-start-end-radius`	same as `pressed-corner-radius` `--ct-button-xlarge-pressed-corner-start-end-radius`
`pressed-corner-start-start-radius`	same as `pressed-corner-radius` `--ct-button-xsmall-pressed-corner-start-start-radius`	same as `pressed-corner-radius` `--ct-button-small-pressed-corner-start-start-radius`	same as `pressed-corner-radius` `--ct-button-medium-pressed-corner-start-start-radius`	same as `pressed-corner-radius` `--ct-button-large-pressed-corner-start-start-radius`	same as `pressed-corner-radius` `--ct-button-xlarge-pressed-corner-start-start-radius`

Other tokens⁠

These stay the same whatever the variant and size.

Token	Value
`--ct-button-group-connected-container-shape`	`--ct-sys-corner-radius-full` `--ct-button-group-connected-container-shape`
`--ct-button-group-connected-small-inner-corner`	`--ct-sys-corner-radius-small` `--ct-button-group-connected-small-inner-corner`
`--ct-button-group-connected-small-pressed-inner-corner`	`--ct-sys-corner-radius-extra-small` `--ct-button-group-connected-small-pressed-inner-corner`
`--ct-button-icon-fill`	`1` `--ct-button-icon-fill`
`--ct-button-max-width`	`320px` `--ct-button-max-width`

Names and states⁠

The button follows the WAI-ARIA Authoring Practices: Button pattern; with href it is a link and follows the WAI-ARIA Authoring Practices: Link pattern.

Its accessible name is the text in its default slot. An aria-label on the button replaces that name, so keep the label's words in it.
Only aria-label, aria-haspopup, and aria-expanded on the button take effect. Any other aria-* attribute has no effect. Keep aria-expanded in step with the menu or panel the button opens.
An icon set by icon-name or a slotted cw-icon is hidden from assistive technology. A slotted img or svg is not, and its alt or <title> becomes part of the name: give it an empty alt or aria-hidden="true" when the label already says what the button does.
soft-disabled sets aria-disabled="true", so a screen reader announces the button as unavailable. A disabled or soft-disabled link loses its href and keeps role="link" with aria-disabled="true", so it is still announced as a link.
The tooltip is the button's description. A screen reader reads tooltip-value after the name when the button takes focus, and skips it when it only repeats the name. It never names the button.
The badge's count is neither part of the button's name nor of its description. When the count matters, put it in the label, or in an aria-label that keeps the label's words.
A setting that stays on until switched off belongs in a toggle button, which carries aria-pressed; a button has no pressed state.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the button, and on to the next control
Enter	Activates the button, or follows the link
Space	Activates the button; a link ignores it
Escape	Hides the tooltip, when the button has one

A focus ring shows on keyboard focus only, and hides on a pointer press.
disabled takes the button out of the Tab order, so it cannot be focused or activated, and its tooltip is never announced.
soft-disabled keeps the button in the Tab order. Enter, Space, and a click still reach it, and the component swallows the click, so the action never runs; a listener registered in the capture phase still sees the click. Give it a tooltip that says why, and a screen reader reads that reason on focus.

Pointer and touch⁠

With the style configuration's default, overflow, the touch target is at least 48 by 48 pixels at every size, past what WCAG 2.5.8 asks (24 by 24). wrapper keeps that size and makes it part of the layout. none makes the target the painted button.

Display settings⁠

In forced colors, the button takes a 1-pixel ButtonText border, and a disabled button a dashed GrayText one. The hover and press overlays are hidden; instead, hovering draws a 2-pixel ButtonText border and pressing a 4-pixel one. The focus ring is a solid CanvasText outline.
With reduced motion, the press ripple, the focus ring's animation, and the tooltip's fade are skipped, and the corner change on press completes at once.
In a right-to-left layout, an icon-name icon mirrors when flip-icon-in-rtl is set. A slotted icon never mirrors, and nothing else about the button changes.

Standards⁠

With its defaults, the button meets seven WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.1.2 No Keyboard Trap (A)
2.5.2 Pointer Cancellation (A)
2.4.7 Focus Visible (AA)
2.5.8 Target Size (Minimum) (AA)
1.3.1 Info and Relationships (A)
1.4.13 Content on Hover or Focus (AA)

Five more depend on how you use it:

4.1.2 Name, Role, Value (A): give every button a text label, or an aria-label where it has none.
2.5.3 Label in Name (A): keep the visible label's words in any aria-label.
2.4.6 Headings and Labels (AA): write a label that says what the button does, such as Send invitation.
1.1.1 Non-text Content (A): give a slotted img an alt, or mark a decorative one with an empty alt.
2.4.4 Link Purpose (In Context) (A): label a link button with where it goes.

Button

Reference docs⁠link

Choosing a button⁠link

Choosing a variant⁠link

Built in⁠link

Using buttons well⁠link

Variants⁠link

Size⁠link

Icons⁠link

Badges⁠link

Tooltips⁠link

Links⁠link

Forms⁠link

Disabled and soft-disabled⁠link

In a dialog⁠link

Properties⁠link

Slots⁠link

Events⁠link

Props⁠link

Children⁠link

Events⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Variant⁠link

Size⁠link

Other tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a button⁠

Choosing a variant⁠

Built in⁠

Using buttons well⁠

Variants⁠

Size⁠

Icons⁠

Badges⁠

Tooltips⁠

Links⁠

Forms⁠

Disabled and soft-disabled⁠

In a dialog⁠

Properties⁠

Slots⁠

Events⁠

Props⁠

Children⁠

Events⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Variant⁠

Size⁠

Other tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠