revido kit
Start building
← All components
actions / stable

Button

Action or styled navigation: bind onPress for actions, href for navigation, and loading while pending. Pill-shaped with primary or soft-tint danger intent.

LIVE PREVIEW
Loading preview…

When to use

  • The main action of a view or dialog (one primary per area).
  • Secondary actions next to a primary one (secondary, outline or ghost).
  • Navigation that should look like an action — pass `href`.

Consider an alternative

  • Inline navigation in text — use a link.
  • Toggling a setting — use Switch or SegmentedControl. (A panel/surface open-close toggle is the exception: `aria-pressed`.)
  • Destructive actions without confirmation — pair danger with a confirm dialog.

Import

import { Button } from '@revido-llc/kit';

Keyboard interaction

  • Enter / Space — activate (or toggle, with aria-pressed)
  • Tab — move focus (soft cobalt halo)

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

asChildbooleanfalseRender the single child (e.g. a Next `<Link>`) with button styles instead of a `<button>`.
disabledReasonstring—With `disabled`, keeps the button focusable (`aria-disabled`), ignores presses and shows this reason in a tooltip on hover and focus, announced through `aria-describedby`. With an `href` it renders as a non-link `button` element (role button) and does not navigate. Has no effect while `loading` or with `asChild`.
hrefstring—Navigate on press through the Kit router (client-side in Next via NextKitProvider).
loadingbooleanfalseShows a spinner, keeps the width, and blocks presses.
onPress(() => void)—React Aria press handler (mouse, touch, keyboard, screen reader). `onClick` works too, keyboard included.
onPressEnd((event: PressEvent) => void)—React Aria press end (release, pointer leaving the button, or key up).
onPressStart((event: PressEvent) => void)—React Aria press start (pointer down, or Space/Enter down). Used by `HoldToConfirmButton`.
size"xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg""md"
variant"primary" | "secondary" | "outline" | "ghost" | "danger" | "link""primary"
childrenReactNode—
classNamestring—

Related exports

HoldToConfirmButton

Examples

Variants

Every variant in xs, sm, md and lg. One primary per area; danger uses a soft tint.

<Button size="xs">Save</Button>
<Button size="sm">Save</Button>
<Button>Save</Button>
<Button size="lg">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="outline">Export</Button>
<Button variant="ghost">More</Button>
<Button variant="danger">Delete</Button>
<Button variant="link">Learn more</Button>

Sizes

md (32px) is the default; sm (28px) for toolbars and dense tables.

<Button size="sm">Filter</Button>
<Button>Save</Button>
<Button size="lg">Create project</Button>

Leading icon

Icon before the label for creation and file actions; 16px, stroke follows the text colour.

<Button><Plus /> New task</Button>
<Button variant="secondary"><ListFilter /> Filter</Button>
<Button variant="danger"><Trash2 /> Delete</Button>

Trailing icon

After the label for menus (chevron), next steps (arrow) and external destinations.

<Button variant="secondary">Status <ChevronDown /></Button>
<Button>Continue <ArrowRight /></Button>

Icon only

Square sizes matching each text size (24/28/32/36). Always pass aria-label; add a Tooltip.

<Button variant="ghost" size="icon" aria-label="More actions"><MoreHorizontal /></Button>
<Button variant="outline" size="icon-sm" aria-label="Add"><Plus /></Button>

Hold to confirm

HoldToConfirmButton fires onConfirm only after the press is held (mouse, touch, or Space/Enter); a fill shows progress and releasing early cancels. AlertDialog uses it for confirmMode="hold".

<HoldToConfirmButton variant="danger" onConfirm={deleteProject}>
  <Trash2 /> Hold to delete
</HoldToConfirmButton>
<HoldToConfirmButton holdDurationMs={2000} onConfirm={publish}>Hold to publish (2s)</HoldToConfirmButton>

Toggle (pressed)

`aria-pressed` turns a Button into an on/off toggle: the pressed tint is built in. Use it for opening and closing a panel or surface from a fixed control (e.g. the ERP header's Rev button).

const [open, setOpen] = useState(false);
<Button variant="ghost" aria-pressed={open} onPress={() => setOpen(!open)}>
  <Sparkles /> Rev
</Button>

States

<Button loading>Saving</Button>
<Button disabled>Disabled</Button>
<Button href="/projects">Open projects</Button>

Disabled with a reason

`disabled` with `disabledReason` keeps the button focusable (aria-disabled), ignores presses and explains why in a tooltip on hover and focus, so keyboard and screen reader users learn the reason. Without a reason it stays a native disabled button.

<Button disabled disabledReason="You can send another reminder in 5 hours.">
  Send reminder
</Button>

Literal anatomy

Static component anatomy; bind events in the consuming app.

<HoldToConfirmButton variant="danger">Delete draft</HoldToConfirmButton>

Related components