Form

Button

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

Examples

Default

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

5 lines

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

export function ButtonDefault() {
  return <Button>Button</Button>;
}

Destructive

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

5 lines

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

export function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>;
}

Ghost

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

5 lines

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

export function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>;
}

Icon

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

10 lines

import { Button } from "@codefast/ui/button";
import { CircleFadingArrowUpIcon } from "lucide-react";

export function ButtonIcon() {
  return (
    <Button variant="outline" size="icon">
      <CircleFadingArrowUpIcon />
    </Button>
  );
}

Link

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

5 lines

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

export function ButtonLink() {
  return <Button variant="link">Link</Button>;
}

Outline

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

5 lines

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

export function ButtonOutline() {
  return <Button variant="outline">Outline</Button>;
}

Rounded

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

12 lines

import { Button } from "@codefast/ui/button";
import { ArrowUpIcon } from "lucide-react";

export function ButtonRounded() {
  return (
    <div className="flex flex-col gap-8">
      <Button variant="outline" size="icon" className="rounded-full">
        <ArrowUpIcon />
      </Button>
    </div>
  );
}

RTL

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

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

56 lines

import { Button } from "@codefast/ui/button";
import { Spinner } from "@codefast/ui/spinner";
import { ArrowRightIcon, PlusIcon } from "lucide-react";

import type { Translations } from "#/features/components-catalog/components/detail/language";
import { useTranslation } from "#/features/components-catalog/components/detail/language-context";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      button: "Button",
      submit: "Submit",
      delete: "Delete",
      loading: "Loading",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      button: "زر",
      submit: "إرسال",
      delete: "حذف",
      loading: "جاري التحميل",
    },
  },
  he: {
    dir: "rtl",
    values: {
      button: "כפתור",
      submit: "שלח",
      delete: "מחק",
      loading: "טוען",
    },
  },
};

export function ButtonRtl() {
  const { dir, t } = useTranslation(translations, "ar");

  return (
    <div className="flex flex-wrap items-center gap-2 md:flex-row" dir={dir}>
      <Button variant="outline">{t.button}</Button>
      <Button variant="destructive">{t.delete}</Button>
      <Button variant="outline">
        {t.submit} <ArrowRightIcon className="rtl:rotate-180" data-icon="inline-end" />
      </Button>
      <Button variant="outline" size="icon" aria-label="Add">
        <PlusIcon />
      </Button>
      <Button variant="secondary" disabled>
        <Spinner data-icon="inline-start" /> {t.loading}
      </Button>
    </div>
  );
}

Secondary

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

5 lines

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

export function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>;
}

Size

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

39 lines

import { Button } from "@codefast/ui/button";
import { ArrowUpRightIcon } from "lucide-react";

export function ButtonSize() {
  return (
    <div className="flex flex-col items-start gap-8 sm:flex-row">
      <div className="flex items-start gap-2">
        <Button size="xs" variant="outline">
          Extra Small
        </Button>
        <Button size="icon-xs" aria-label="Submit" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button size="sm" variant="outline">
          Small
        </Button>
        <Button size="icon-sm" aria-label="Submit" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button variant="outline">Default</Button>
        <Button size="icon" aria-label="Submit" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button variant="outline" size="lg">
          Large
        </Button>
        <Button size="icon-lg" aria-label="Submit" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
    </div>
  );
}

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.

17 lines

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

export function ButtonSpinner() {
  return (
    <div className="flex gap-2">
      <Button variant="outline" disabled>
        <Spinner data-icon="inline-start" />
        Generating
      </Button>
      <Button variant="secondary" disabled>
        Downloading
        <Spinner data-icon="inline-start" />
      </Button>
    </div>
  );
}

With Icon

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

10 lines

import { Button } from "@codefast/ui/button";
import { GitBranchIcon } from "lucide-react";

export function ButtonWithIcon() {
  return (
    <Button variant="outline" size="sm">
      <GitBranchIcon /> New Branch
    </Button>
  );
}

As Child

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

10 lines

import { Button } from "@codefast/ui/button";
import { Link } from "@tanstack/react-router";

export function ButtonAsChild() {
  return (
    <Button asChild>
      <Link to="/">Login</Link>
    </Button>
  );
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

Button

Features

Six variants (default, secondary, outline, ghost, destructive, link) and eight sizes, including icon-only sizes.
asChild renders the child element in place of a <button> — turn a link or custom trigger into a styled button.
A child marked data-icon="inline-start" or "inline-end" (an icon or a Spinner) automatically tightens its padding.
Styles itself as active via aria-expanded when used as a menu or popover trigger.

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.

Visual style of the button.

Default"default"

Controls height and horizontal padding. Use icon sizes for icon-only buttons.

Default"default"

asChildboolean

Merge props onto the single child instead of rendering a <button>.

Defaultfalse

disabledboolean

Disables interaction and removes the button from the tab order.

Defaultfalse

type"button" | "submit" | "reset"

Native button type. Defaults to button to avoid accidental form submits.

Default"button"

Accessibility

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

Key	Function
`Tab`	Moves focus to and from the button.
`Space`	Activates the button.
`Enter`	Activates 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.

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.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting Started Browse all components

Examples

Default

Destructive

Ghost

Icon

Link

Outline

Rounded

RTL

Secondary

Size

Spinner

With Icon

As Child

Anatomy

Features

API reference

Button

Accessibility

Guidelines

Related