Design system

Button

A compact action control with shared variants, sizes, and focus states.

Use a button for an action that changes state, submits work, or opens another control. Keep the label specific to the result of the action.

Built on Workshop1 compositionUpstream API

No action selected

Import

import { Button } from "@workshop1/ui/components/button"

Variants

default is the primary action. Use outline or secondary for supporting actions, ghost for compact toolbars, destructive for confirmed destructive actions, link for inline navigation, and inverse on a primary-coloured surface.

Sizes

Use xs and sm in dense toolbars, default for regular controls, and lg for page-level calls to action. The icon sizes require an accessible label when there is no visible text. Use disabled when the action is unavailable; the primitive does not provide a loading state, so keep async progress in the surrounding composition.

Accessibility

Use a native button for actions. Give icon-only buttons an aria-label, preserve the visible focus ring, and keep disabled state for unavailable actions rather than hiding the control.

Best practices

  • Use one primary button for a task area.
  • Start labels with a verb and describe the result.
  • Use asChild when a styled action is a link, while keeping the link destination explicit.