Button

The Open UI Kit Button lets users trigger actions, submit forms, and make choices with predictable product styling.

Introduction

Button keeps the expected button API while applying Open UI Kit sizing, spacing, focus, disabled, loading, and color treatments. Use it for clear actions in toolbars, dialogs, forms, cards, and page headers.

Import

import { Button } from '@open-ui-kit/core';

When to use

Use Button when the user needs to trigger an action, submit a form, open a flow, or make a clear choice. Buttons should communicate what happens next with a short, action-led label.

Use links for navigation to another page and icon buttons only when the icon is familiar or paired with an accessible label.

Anatomy

A button is made from a label, optional leading or trailing icon, visual priority, size, and state. The label carries the meaning of the action, while the variant and color communicate importance and risk. Icons should clarify the action, not replace the label unless the control is intentionally icon-only.

Variants

Use primary for the main action, secondary for supporting actions, outlined for lower emphasis, and tertariary for text-like actions.

Sizes

Button supports small, medium, and large. Use medium for most product UI, small for dense toolbars, and large for high-emphasis page or modal actions.

Small

Medium

Large

Destructive actions

Use color="negative" for destructive or high-risk actions. Negative styling is supported for primary, outlined, and tertariary variants.

Icons

Use startIcon or endIcon when an icon clarifies the action. For icon-only buttons, pass the icon as the only child and provide an accessible label.

States

Buttons support disabled and loading states through the standard button API. Use loading when the action has been accepted and is still processing.

Behavior notes

Use type="submit" for form submission and type="button" for non-submit actions inside forms. Use loading after an action has started so users know the click was accepted. Keep disabled buttons visible only when users benefit from understanding that the action exists but is currently unavailable.

Props

Button supports the usual button props, including variant, size, color, disabled, loading, startIcon, endIcon, onClick, href, and type.

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outlined' \| 'tertariary'`	-	Visual priority of the button.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Button height, padding, and icon sizing.
`color`	`'negative' \| ButtonProps['color']`	-	Use `negative` for destructive actions.
`disabled`	`boolean`	`false`	Prevents interaction and applies disabled styling.
`loading`	`boolean`	`false`	Shows the loading indicator and loading styling.
`startIcon`	`React.ReactNode`	-	Icon shown before the label.
`endIcon`	`React.ReactNode`	-	Icon shown after the label.

Accessibility

Use concise action labels. Icon-only buttons must include an accessible label with aria-label. Avoid using color alone to communicate destructive actions; the label should make the action clear.

Usage guidance

Use one primary action per surface when possible.
Use secondary or outlined buttons for supporting actions.
Use tertariary for quiet actions that should not compete with the main flow.
Use color="negative" only for destructive or risky actions.
Keep labels short and verb-led, such as "Save", "Invite", or "Delete".