# Button

Source: https://design.ritchiebros.com/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](https://www.figma.com/design/qTXtfxjlhkT9KC3erzlsxh/Orbit-Legacy-DS?node-id=6543-36648)

The **Button** component in the Orbit Figma UI Kit.

## Storybook

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

## 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

- [ButtonGroup](https://design.ritchiebros.com/components/inputs/button-group/)
- [Link](https://design.ritchiebros.com/components/navigation/link/)
- Fab