ComponentsFormButton

Button

Buttons trigger an action or event. Use their emphasis, content, and placement to make the next available action clear.

6 variants5 sizesLoading stateIcon supportKeyboard accessible

Overview

A button communicates an action that happens in the current context. Its label should set a clear expectation of the result.

Default button

Live preview

Use the filled variant for the primary action in a focused area.

App.tsx
tsx
import { Button } from 'omverse-ui'
 
<Button onClick={handleSave}>Save changes</Button>

Choose button emphasis based on action priority, not visual preference. Most surfaces need one primary action and a small number of supporting actions.

Use a link when the destination changes. Use a button when the current interface performs an operation, updates data, or reveals UI.

Anatomy

A button has a container, an action label, and optional supporting icons. The label is always the accessible name.

1234
  1. 1
    ContainerRequired

    Defines emphasis, boundary, target size, and interaction states.

  2. 2
    Leading icon

    Optional symbol that reinforces the action. Never replaces the label.

  3. 3
    LabelRequired

    Uses a short verb phrase that describes the outcome.

  4. 4
    Trailing icon

    Optional directional cue for progression or disclosure.

When to use

Use a button for clear, immediate actions that operate within the current task or surface.

Recommended

  • Submit or confirm a task

    Save a form, create an item, apply changes, or confirm a decision.

  • Reveal an interface

    Open a dialog, menu, drawer, file picker, or another interactive layer.

  • Trigger an operation

    Refresh data, export a report, run a check, or retry a failed request.

When not to use

Choose a more specific control when the interaction is navigation, selection, or a persistent setting.

Avoid

  • Do not use for navigation

    Use a link when people move to another page, route, or external destination.

  • Do not use as a checkbox or switch

    Use a selection control when the interface must communicate a persistent value.

  • Do not overload a surface

    Too many competing buttons hide priority. Move secondary actions into menus or quieter controls.

Variants

Variants create an intentional hierarchy. Select the quietest treatment that still communicates the action’s importance.

Emphasis hierarchy

Live preview

Filled is highest emphasis; text is lowest emphasis.

App.tsx
tsx
<Button variant="filled">Create project</Button>
<Button variant="outlined">Preview</Button>
<Button variant="tonal">Assign</Button>
<Button variant="text">Learn more</Button>
<Button variant="elevated">Open workspace</Button>
<Button variant="filled" gradient>Upgrade plan</Button>

Filled

Primary action in a focused area. Usually one per section or decision point.

Outlined

Supporting action that needs a visible boundary without competing with primary.

Tonal

Moderate emphasis for common actions on neutral surfaces.

Text

Low-emphasis action used in compact or content-heavy contexts.

States

States provide immediate feedback about availability, focus, progress, and completion.

Operational states

Live preview

Loading blocks repeated actions; success confirms completion; disabled communicates unavailability.

StateTriggerVisual responseInteraction
DefaultNo interactionBase container and label colorsReady to receive focus or activation
HoverPointer rests over buttonState layer increases emphasisCursor indicates an actionable control
FocusKeyboard or assistive inputHigh-contrast focus ringEnter or Space activates the action
PressedPointer or key is heldPressed state layerAction fires once on release
LoadingAction is in progressSpinner replaces or accompanies contentRepeated activation is blocked
DisabledAction is unavailableReduced emphasisRemoved from activation behavior

Behavior

Button behavior must remain predictable across input methods, async actions, and responsive layouts.

Activation

Fire one action per click, tap, Enter, or Space activation. Prevent accidental double submission.

Async actions

Show loading immediately, preserve the label context, and block duplicate activation until completion.

Responsive width

Keep intrinsic width by default. Use full width for narrow forms and stacked mobile actions.

Focus continuity

Keep focus on the button after non-navigational actions unless a new modal context requires focus transfer.

Accessibility

Buttons use native button semantics so keyboard, screen-reader, and alternative-input behavior works consistently.

KeyAction
TabMoves focus to the button when it is available.
EnterActivates the focused button.
SpaceActivates the focused button on key release.
  • Use a visible text label that describes the outcome.
  • Keep decorative icons hidden from the accessibility tree.
  • Preserve a visible focus ring in every visual variant.
  • Do not communicate state through color alone.
  • Use disabled only when the action truly cannot run.
  • Announce async completion or errors in the surrounding workflow when needed.

Content guidelines

Button labels should be concise, specific, and written from the user’s point of view.

Start with a verb

Describe the action directly instead of naming the object alone.

ExampleCreate project

Name the outcome

Use specific labels when generic words could make people hesitate.

ExampleSend invitation

Use sentence case

Capitalize the first word and proper nouns. Avoid title case and punctuation.

ExampleSave changes

Keep labels stable

Loading feedback should preserve enough context to identify the action in progress.

ExampleSaving changes

Examples

Compose icons, state, and width only when they improve comprehension or fit the surrounding workflow.

Product actions

Live preview

Realistic actions across creation, export, progression, and async feedback.

Responsive form action

Live preview

Full-width buttons work well at the bottom of narrow forms.

App.tsx
tsx
<Button leadingIcon="plus">Create issue</Button>
<Button variant="outlined" leadingIcon="download">Export report</Button>
<Button trailingIcon="arrow-right">Continue</Button>
<Button loading>Saving changes</Button>
<Button success>Saved</Button>

Props / API

Button extends native button attributes. Forward event handlers, data attributes, and ARIA attributes as needed.

Props

PropTypeDefaultDescription
variant'filled' | 'outlined' | 'tonal' | 'text' | 'elevated' | 'gradient''filled'Sets visual emphasis and container treatment.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Controls height, horizontal padding, type size, and icon size.
loadingbooleanfalseShows progress, preserves width, and prevents repeated activation.
successbooleanfalseShows a confirmation icon for a completed action.
disabledbooleanfalsePrevents interaction and communicates unavailability.
leadingIconIconNameundefinedDisplays a decorative or reinforcing icon before the label.
trailingIconIconNameundefinedDisplays a directional or reinforcing icon after the label.
fullWidthbooleanfalseExpands the button to the width of its containing block.
gradientbooleanfalseApplies the branded gradient treatment to supported variants.