Spinner

An indicator that can be used to show a loading state.

Code

import {
  Item,
  ItemContent,
  ItemMedia,
  ItemTitle,
  Spinner,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:w-full tw:max-w-xs tw:flex-col tw:gap-4">
      <Item variant="muted">
        <ItemMedia>
          <Spinner aria-hidden />
        </ItemMedia>
        <ItemContent>
          <ItemTitle className="tw:line-clamp-1">Processing order...</ItemTitle>
        </ItemContent>
        <ItemContent className="tw:flex-none tw:justify-end">
          <span className="tw:text-sm tw:tabular-nums">$100.00</span>
        </ItemContent>
      </Item>
    </div>
  );
}

Size

Use the tw:size-* utility class to change the size of the spinner.

Code

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

export function Example() {
  return (
    <div className="tw:flex tw:items-center tw:gap-6">
      <Spinner className="tw:size-3" aria-hidden />
      <Spinner className="tw:size-4" aria-hidden />
      <Spinner className="tw:size-6" aria-hidden />
      <Spinner className="tw:size-8" aria-hidden />
    </div>
  );
}

Button

Add a spinner to a Button to indicate a loading state. Place the <Spinner /> before the label with data-icon="inline-start" for a start position, or after the label with data-icon="inline-end" for an end position.

Code

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

export function Example() {
  return (
    <div className="tw:flex tw:flex-col tw:items-center tw:gap-4">
      <Button disabled size="sm">
        <Spinner aria-hidden data-icon="inline-start" />
        Saving order...
      </Button>
      <Button variant="outline" disabled size="sm">
        <Spinner aria-hidden data-icon="inline-start" />
        Loading inventory
      </Button>
      <Button variant="secondary" disabled size="sm">
        <Spinner aria-hidden data-icon="inline-start" />
        Processing report
      </Button>
    </div>
  );
}

Badge

Add a spinner to a Badge to indicate a loading state. Place the <Spinner /> before the label with data-icon="inline-start" for a start position, or after the label with data-icon="inline-end" for an end position.

Code

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

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:items-center tw:gap-4">
      <Badge>
        <Spinner aria-hidden data-icon="inline-start" />
        Syncing inventory
      </Badge>
      <Badge variant="secondary">
        <Spinner aria-hidden data-icon="inline-start" />
        Updating prices
      </Badge>
      <Badge variant="outline">
        <Spinner aria-hidden data-icon="inline-start" />
        Processing order
      </Badge>
    </div>
  );
}

Input Group

Code

import {
  ArrowUpIcon,
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupTextarea,
  Spinner,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:w-full tw:max-w-md tw:flex-col tw:gap-4">
      <InputGroup>
        <InputGroupInput
          aria-label="Search products"
          placeholder="Search products..."
          disabled
        />
        <InputGroupAddon align="inline-end">
          <Spinner aria-label="Loading products" />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupTextarea
          aria-label="Order note"
          placeholder="Add an order note..."
          disabled
        />
        <InputGroupAddon align="block-end">
          <Spinner aria-hidden /> Validating...
          <InputGroupButton className="tw:ml-auto" variant="default">
            <ArrowUpIcon />
            <span className="tw:sr-only">Send</span>
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Empty

Code

import {
  Button,
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  Spinner,
} from "@falcon/ui-kit";

export function Example() {
  return (
    <Empty className="tw:w-full">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Spinner aria-hidden />
        </EmptyMedia>
        <EmptyTitle>Preparing inventory report</EmptyTitle>
        <EmptyDescription>
          Please wait while we load the latest product availability. Do not
          refresh the page.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Cancel
        </Button>
      </EmptyContent>
    </Empty>
  );
}

API

Spinner

Indicates that an operation is in progress. Renders an <svg> element and accepts standard <svg> props. role defaults to "status" and aria-label to "Loading".