Button

Set variant beside color to choose how much paint a button uses, from solid and outlined down to text and link.

Set color to default, primary or danger, or to a color name like blue or emerald, and each color works with every variant.

Set size to small, medium or large to match the button to the controls around it, with medium as the default.

Set shape to squircle for a smooth superellipse corner, round for a pill, or circle for a round icon button.

Set color="danger" with any variant for destructive actions, from a solid Delete to a quiet Unsubscribe link.

Set ghost to drop the button's background so it reads over a photo or a colored surface, keeping its border and text color.

Set block to make a button fill the width of its parent, like the actions at the bottom of a form or a mobile sheet.

Set disabled on any variant or icon button, and on an href button, which then drops its link so it cannot be focused or followed.

Set defaultBgDisabled and dashedBgDisabled in a ThemeScope to change the disabled fill of default and dashed buttons.

Pass an Icon to icon to put it before the label, or set iconPlacement="end" to move it after, like an arrow on Continue, with any shape.

Pass only an icon and an aria-label for a square icon button in any variant, or set shape for a circle or a squircle.

Pass avatar an image URL to put a face in the icon slot, rounded to match its shape.

Set iconPlacement="end" with avatar to put the face after the name, and the spacing around it moves along.

Pass avatar and an aria-label with no label for a button that is only a face, in a square, squircle or circle shape.

Set loadingPlacement="center" to hide the label and center the spinner so the button keeps its size, or leave it off to swap the icon for a spinner.

Pass href to render a button as a link that keeps its look, and use variant="link" for the link style on either element.

Wrap part of a page in ThemeScope to give it its own theme, like a violet primary for one button while the rest keeps yours.

Wrap buttons in Space.Compact to join them into one group, like Move and Rename, with a lone Back button and a group that ends in a menu beside them.

End a group with a Dropdown on a chevron button to fold the extra actions into a menu, like the ways to publish or reply.

Join an action to a second button that shows its count, like Star and Watch, which toggle and update the number.

Set orientation="vertical" on Space.Compact to stack the buttons, like zoom in and out on a map.

Set size on Space.Compact to size every button in the group at once.

Mix a Select and buttons in one group for a text editor toolbar, with bold, italic and underline and a menu for the rest.

A settings card of irreversible actions, each button louder than the last, with a confirmation before the delete.

A call to action with one solid button, one quiet text button and a line of reassurance underneath.

An icon button that copies a command and swaps its copy icon for a check mark for a moment, without changing width.

A Badge around filter buttons that counts the active filters, which you toggle with the buttons below.

A drawing app's tool bar where the picked tool turns solid, a chevron opens its variants with a check and a shortcut, and a Segmented switches the mode.