Text to display on a button is provided as the default slot content.

Icons are placed inside the default slot. The position of the icon is expressed by slot order. Add the flex-col class to stack the icon and label vertically.

Render a spinner inside the default slot while toggling disabled to express the busy state.

The button element can be displayed as a link element visually when the link property is present. If you need to customize the rendering, use the as to change the element or asChild for advanced templating.

The severity property defines the variant of a button.

Raised buttons display a shadow to indicate elevation.

Rounded buttons have a circular border radius.

Text buttons are displayed as textual elements.

Text buttons can be displayed elevated with the raised option.

Outlined buttons display a border without a background initially.

Set the iconOnly prop to render the button as a square icon button without a label slot.

Badge component can be used to display a badge inside a button. OverlayBadge is used to display a badge on a button.

Multiple buttons are grouped when wrapped inside an element with ButtonGroup component.

Button provides small and large sizes as alternatives to the base.

When disabled is present, the element cannot be used.

Custom content inside a button is defined as children.

Screen Reader

Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop. If the button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.

Keyboard Support