Button

A clear next step. Familiar actions, considered states, and the right amount of emphasis.

Choose an action to try its feedback.

Variants · React

<Button>Create project</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Learn more</Button>
<Button variant="danger">Delete project</Button>

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add button

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

import { Button } from "./components/antiflex/button";

<Button onClick={createProject}>Create project</Button>

Sizes

Three heights, one rhythm. Use the same size for actions that belong together.

32px

36px

40px

Sizes · React

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With icons

Keep a visible label when space allows. Name every icon-only action with aria-label.

Icons support the action. Labels carry its meaning.

With icons · React

<Button><IconPlus aria-hidden="true" /> New project</Button>
<Button variant="secondary">Download <IconDownload aria-hidden="true" /></Button>
<Button variant="secondary" aria-label="More project actions"
  className="reference-icon-button">
  <IconDots aria-hidden="true" />
</Button>

/* Consumer styling: match width to the button height. */
.reference-icon-button { width: 36px; padding: 0; }

Loading and disabled

Show progress where the action happened. Loading keeps the label visible and prevents repeat activation.

Try saving. The button prevents repeat activation.

Loading and disabled · React

<Button loading={saving} onClick={saveChanges}>
  {saving ? 'Saving changes…' : 'Save changes'}
</Button>
<p role="status">{message}</p>

Button group

Group related actions without merging their keyboard behavior.

Each native button keeps its own focus and pressed state.

Button group · React

<ButtonGroup aria-label="Text formatting">
  <Button variant="secondary" aria-label="Bold" aria-pressed={bold}
    onClick={() => setBold(!bold)}><IconBold aria-hidden="true" /></Button>
  {/* Add independent Italic and Underline buttons in the same way. */}
</ButtonGroup>

Right-to-left

Logical spacing keeps the icon and its label together in either direction.

Direction follows the surrounding document.

Right-to-left · React

<div dir="rtl">
  <Button><IconPlus aria-hidden="true" /> مشروع جديد</Button>
  <Button variant="secondary">إلغاء</Button>
</div>

In context

Workspace settingsValidation, unsaved changes, and a complete save flow.

API reference

Button forwards native button attributes, className, and a ref. The default type is button; use type="submit" inside forms.

Prop	Type	Default
`variant`	`primary \| secondary \| ghost \| danger`	`primary`
`size`	`sm \| md \| lg`	`md`
`loading`	`boolean`	`false`
`disabled`	`boolean`	`false`

Accessibility

Use a native button for an action and a link for navigation.
Enter and Space activate the focused button. Keep the visible focus indicator.
Provide an accessible name for icon-only controls.
Loading sets aria-busy and native disabled state. Keep important outcomes visible outside the button.