Button Preview

A button triggers a single action or event.

Use buttons for important actions like submitting a response, committing a change, or moving to the next step. For navigating to another place, try a link instead.

Loading...
Open in CodeSandbox
Button storybook
React guidance
Button pattern
WAI guidance

Properties

appearance

A button can have its content and borders styled for greater emphasis or to be subtle.

  • ‘secondary’ (default): Gives emphasis to the button in such a way that it indicates a secondary action.
  • ‘primary’: Emphasizes the button as a primary action.
  • ‘outline’: Removes background styling.
  • ‘subtle’: Minimizes emphasis to blend into the background until hovered or focused.
  • ‘transparent’: Removes background and border styling.
“subtle” “outline” “secondary” “primary” “transparent”
Default:
“secondary”

as

“a” “button”
Default:
none

disabledFocusable

When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons. When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.

boolean
Default:
false

icon

Icon that renders either before or after the children as specified by the iconPosition prop.

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

iconPosition

A button can format its icon to appear before or after its content.

“before” “after”
Default:
“before”

shape

A button can be rounded, circular, or square.

“circular” “squared” “rounded”
Default:
“rounded”

size

A button supports different sizes.

“small” “medium” “large”
Default:
“medium”