Components / Inputs

Button

Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions.

Figma

Open in Figma

The Button component in the Orbit Figma UI Kit.

Storybook

Interactive examples for Button will render here once the Storybook link is wired in.

Storybook component story

Best practices

  • Be clearly and accurately labeled.
  • Lead with a strong, actionable verb.
  • Use established button colors appropriately — for example, only use a critical (destructive) button for an action that’s difficult or impossible to undo.
  • Prioritize the most important actions. Too many calls to action can cause confusion and make people unsure of what to do next.
  • Be positioned in consistent locations in the interface.
  • Use only one primary button in a section or screen so the most important action stays clear.

Do’s and don’ts

Do

Use short, verb-led labels in sentence case: “Save”, “Edit”, “Place bid”.

Don’t

Pad labels with nouns or articles: “Save the lot”, “Place a new bid now”.

Do

Reserve the primary button for the single most important action on the screen.

Don’t

Fill a screen with multiple primary buttons competing for attention.

Do

Trigger a confirmation before a critical action that deletes data.

Don’t

Run an irreversible action the moment a critical button is pressed.

Accessibility

  • Use the disabled state to convey that an action isn’t currently available, and make it clear elsewhere why and how to enable it.
  • If a button expands or collapses adjacent content, reflect that with aria-expanded so assistive technology announces the current state.
  • People expect buttons to submit or take action and links to navigate. If the control navigates, render it as a link styled like a button rather than a plain button.

Related components