codefast/ui

Command Palette

Search for a command to run...

Form

Button

Six variants and four sizes. Supports icons, loading state, and asChild composition.

Sourcenpm

Install

pnpm add @codefast/ui

Import path

@codefast/ui/button

Examples

Default

Displays a button or a component that looks like a button.

Destructive

Displays a button or a component that looks like a button.

Ghost

Displays a button or a component that looks like a button.

Icon

Displays a button or a component that looks like a button.

Outline

Displays a button or a component that looks like a button.

Rounded

Use the rounded-full class to make the button rounded.

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

Secondary

Displays a button or a component that looks like a button.

Size

Use the size prop to change the size of the button.

Spinner

Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon='inline-start' or data-icon='inline-end' attribute to the spinner for the correct spacing.

With Icon

Remember to add the data-icon='inline-start' or data-icon='inline-end' attribute to the icon for the correct spacing.

As Child

Use the asChild prop on Button to make another component look like a button.

Login

Anatomy

How the parts compose. Copy this skeleton and fill in the slots.

import { Button } from "@codefast/ui/button";

<Button variant="default" size="default">
  Label
</Button>

API reference

Props for each part of the component. All native element props are also forwarded.

Button

Renders a native <button>, or its child element when asChild is set.

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"Visual style of the button.
size"xs" | "sm" | "default" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"Controls height and horizontal padding. Use icon sizes for icon-only buttons.
asChildbooleanfalseMerge props onto the single child instead of rendering a <button>.
disabledbooleanfalseDisables interaction and removes the button from the tab order.
type"button" | "submit" | "reset""button"Native button type. Defaults to button to avoid accidental form submits.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

KeyFunction
TabMoves focus to and from the button.
SpaceActivates the button.
EnterActivates the button.
  • Renders a native <button>, so it is focusable and announced as a button with no extra ARIA.
  • Icon-only buttons must set an aria-label — the visible icon carries no accessible name.
  • A visible focus ring is shown only for keyboard focus via :focus-visible.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Lead with the most important action using the default variant — one primary per view.
  • Use the destructive variant for irreversible actions like delete.
  • Keep labels to a verb or verb + noun: “Save”, “Add member”.

Don’t

  • Don’t stack multiple default (primary) buttons next to each other.
  • Don’t use a Button for navigation — use a link (or asChild with an anchor) instead.
  • Don’t rely on colour alone for destructive intent; keep an explicit label.