Button

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

Code

import { ArrowUpIcon, Button } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:md:flex-row">
      <Button variant="outline">Button</Button>
      <Button variant="outline" size="icon" aria-label="Submit">
        <ArrowUpIcon />
      </Button>
    </div>
  );
}

Size

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

Code

import { ArrowUpRightIcon, Button } from "@falcon/ui-kit";

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

Default

Code

import { Button } from "@falcon/ui-kit";

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

Outline

Code

import { Button } from "@falcon/ui-kit";

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

Secondary

Code

import { Button } from "@falcon/ui-kit";

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

Ghost

Code

import { Button } from "@falcon/ui-kit";

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

Destructive

Code

import { Button } from "@falcon/ui-kit";

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

Link

Code

import { Button } from "@falcon/ui-kit";

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

Icon

Code

import { Button, CircleFadingArrowUpIcon } from "@falcon/ui-kit";

export function Example() {
  return (
    <Button variant="outline" size="icon" aria-label="Update">
      <CircleFadingArrowUpIcon />
    </Button>
  );
}

With Icon

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

Code

import { Button, GitBranchIcon, GitForkIcon } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:gap-2">
      <Button variant="outline">
        <GitBranchIcon data-icon="inline-start" /> New Branch
      </Button>
      <Button variant="outline">
        Fork
        <GitForkIcon data-icon="inline-end" />
      </Button>
    </div>
  );
}

Rounded

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

Code

import { ArrowUpIcon, Button } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:gap-2">
      <Button className="tw:rounded-full">Get Started</Button>
      <Button
        variant="outline"
        size="icon"
        className="tw:rounded-full"
        aria-label="Submit"
      >
        <ArrowUpIcon />
      </Button>
    </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.

Code

import { Button, Spinner } from "@falcon/ui-kit";

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

Button Group

To create a button group, use the ButtonGroup component. See the ButtonGroup documentation for more details.

Code

import {
  ArchiveIcon,
  ArrowLeftIcon,
  Button,
  ButtonGroup,
  CalendarPlusIcon,
  ClockIcon,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  ListFilterIcon,
  MailCheckIcon,
  MoreHorizontalIcon,
  TagIcon,
  Trash2Icon,
} from "@falcon/ui-kit";
import { useState } from "react";

export function Example() {
  const [status, setStatus] = useState("open");

  return (
    <ButtonGroup>
      <ButtonGroup className="tw:hidden tw:sm:flex">
        <Button variant="outline" size="icon" aria-label="Go Back">
          <ArrowLeftIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Archive</Button>
        <Button variant="outline">Report</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Snooze</Button>
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <Button variant="outline" size="icon" aria-label="More Options" />
            }
          >
            <MoreHorizontalIcon />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="tw:w-40">
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <MailCheckIcon />
                Mark as reviewed
              </DropdownMenuItem>
              <DropdownMenuItem>
                <ArchiveIcon />
                Archive
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <ClockIcon />
                Snooze
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CalendarPlusIcon />
                Schedule follow-up
              </DropdownMenuItem>
              <DropdownMenuItem>
                <ListFilterIcon />
                Add to queue
              </DropdownMenuItem>
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>
                  <TagIcon />
                  Set status
                </DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
                  <DropdownMenuRadioGroup
                    value={status}
                    onValueChange={setStatus}
                  >
                    <DropdownMenuRadioItem value="open">
                      Open
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="on-hold">
                      On hold
                    </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="closed">
                      Closed
                    </DropdownMenuRadioItem>
                  </DropdownMenuRadioGroup>
                </DropdownMenuSubContent>
              </DropdownMenuSub>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem variant="destructive">
                <Trash2Icon />
                Delete order
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </ButtonGroup>
    </ButtonGroup>
  );
}

As Link

You can use the buttonVariants helper to make a link look like a button.

Do not use <Button render={<a />} nativeButton={false} /> for links. The Button component always applies role="button", which overrides the semantic link role on <a> elements. Use buttonVariants with a plain <a> tag instead.

Code

import { buttonVariants } from "@falcon/ui-kit";

export function Example() {
  return (
    <a
      href="#"
      className={buttonVariants({ variant: "secondary", size: "sm" })}
    >
      Login
    </a>
  );
}

API

Button

Triggers an in-page action. Renders a <button> element by default and accepts standard <button> props. Use render to replace the element. Unlike a native button, type defaults to "button"; pass type="submit" to submit a form.

Props

className

className?: string

CSS class applied to the element.

focusableWhenDisabled

focusableWhenDisabled?: boolean

Whether a disabled button stays focusable, so keyboard and screen reader users can still reach it and read its label.

nativeButton

nativeButton?: boolean = true

Whether the element passed to render is a native button. Set to false when rendering another element.

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

size

size?: "xs" | "sm" | "lg" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null = "default"

Controls the button’s size. The icon sizes are square and are for buttons whose only child is an icon.

style

style?: React.CSSProperties | ((state: ButtonState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

variant

variant?: "outline" | "link" | "secondary" | "default" | "ghost" | "destructive" | null = "default"

Controls the button’s appearance only, never its behavior. The link variant looks like a link without rendering one.