Button

Anatomy

import {Button} from '@staffbase/design';

<Button />;

Examples

Variants

Colors

With icons

Icon only

Use iconOnly to make the padding even so the button renders as a square.

With tooltip

Use Tooltip with is="label" to provide an accessible name for icon-only buttons. The tooltip text becomes the button’s label for assistive technology.

As a link

Use buttonVariants to apply button styles to an <a> tag or any router link component.

API reference

Button

When to use

• To trigger an action in place, such as saving, publishing, importing, or submitting a form.
• To open an overlay from a clear trigger, such as a dialog, alert dialog, popover, menu, or bottom sheet.
• To confirm or dismiss a decision, such as the Cancel and Confirm actions in a dialog footer.
• When a navigation target needs the visual prominence of a button — apply buttonVariants to an anchor element.

When not to use

• Don’t use a Button to display a status, state, or category label — use Pill instead.
• Don’t use a Button to display a count or notification indicator — use Badge instead.
• Don’t use a Button to turn a setting on or off immediately — use Switch instead.
• Don’t use a row of Buttons to switch between mutually exclusive views of the same content — use Segmented Control instead.
• Don’t use a row of Buttons for more than three secondary actions — use Menu instead.
• Don’t use a Button to pick one value from a list of options — use Select instead.
• Don’t use a Button for plain inline navigation inside body text — style the destination as a text link.

How to use

Structure

• Give every button a short text label, or set iconOnly and provide an accessible name.
• Keep one action per button — don’t combine two actions in a single label.
• Place at most one icon on a button, either before or after the label.
• The component spaces the icon and label 8px apart — don’t add manual margins to icons.

Variants

Variant controls emphasis, not meaning. Pair it with color to convey the type of action.

• solid (default) — highest emphasis; use for the main action, and with color="neutral" for the supporting actions beside it.
• outline — medium emphasis; use when a filled background would compete with surrounding content, such as on dense or already colourful surfaces.
• ghost — lowest emphasis; use for tertiary or repeated actions, such as toolbar and table row actions.
• Place ghost buttons on a plain surface such as neutral-surface — they have no background of their own.
• Don’t place a ghost button on an image, a video, or any busy background, because the label loses contrast.

Colors

Color is semantic — choose it by the type of action, never for decoration.

Hierarchy & grouping

• Use only one solid primary button per screen, and only one per dialog.
• Give every other action in the same group a lower emphasis, such as solid neutral for a supporting action and ghost for a tertiary one.
• Order a group so the primary action comes last in reading order, with supporting actions before it.
• Space buttons in a group 8px apart.
• Keep a group to three buttons at most, and move any further actions into a Menu.

Icon & label

• Only add an icon when it clarifies the action and is strongly associated with the label.
• Use a leading icon for actions that create or modify something, such as Add or Upload.
• Use a trailing icon when the action leads elsewhere or reveals more content, such as an arrow or a caret.
• Don’t put an icon on every button in a group — repeated icons read as decoration and slow scanning.
• Set iconOnly for compact, repeated actions where the icon is universally understood; it evens out the padding so the button renders as a square.
• Give every icon-only button an accessible name, either through a Tooltip with is="label" or through aria-label.

States

• Hover, pressed, and keyboard focus states are built in — don’t override or remove them.
• Set disabled when the action exists but isn’t available yet, and keep the button in place so the action stays discoverable.
• Disabled buttons render at 40% opacity and accept neither pointer nor keyboard interaction.
• Don’t rely on the disabled state alone to explain why an action is unavailable — add a tooltip or inline text next to it.
• For an action in progress, keep the button in place, set disabled, replace the leading icon with a LoadingSpinner, and switch the label to the -ing form with a trailing ellipsis.
• Don’t swap a button for a standalone spinner while an action runs — the layout shifts and the action disappears.

Links

• Apply buttonVariants to an anchor element or a router link when a destination needs button styling.
• Don’t render a Button and navigate from its onClick — an anchor keeps right-click, middle-click, and keyboard shortcuts working.
• Add a trailing OpenOutIcon when the link opens in a new tab or leaves the current product area.

Accessibility

• Every button needs an accessible name — visible label text, an aria-label, or a Tooltip with is="label".
• Don’t rely on an icon alone to convey the action to assistive technology.
• Use Button for actions and an anchor for navigation — never a clickable div, which is not focusable or operable by keyboard.
• Keyboard focus is shown with a visible focus ring — don’t remove it.
• Disabled buttons are exempt from the text contrast requirement, but their state must still be conveyed through the disabled attribute.

Content & UX copy

• Use Title Case for button labels.
• Start the label with a verb that names what happens, such as Save, Add, Import, Publish, or Cancel.
• Keep labels to one to three words and drop filler words, such as Import instead of Perform Import.
• Prefer the shorter of two equivalent verbs, such as Next instead of Continue.
• Add the object of the action when the label alone is ambiguous, such as Import File.
• Don’t use vague labels such as OK or Okay — name the action instead.
• Don’t use all caps, and don’t end a label with punctuation such as a period or an exclamation mark.
• Use the -ing form with a trailing ellipsis for in-progress labels, such as Creating…