Icons

How buttery draws icons, at which sizes, and when an icon needs a label.

Icon draws an icon from lucide-react at one of buttery's sizes, with the stroke weight and color of the text around it. Use it for every icon, and give it a label when nothing next to it says what it means.

Sizes

size="sm" (16px, the default) is for icons inside controls and beside text. size="md" (20px) is for icons that stand on their own, such as an empty state's.

import type { ReactElement } from "react";
import { Icon, Inline, Text } from "@butteryui/core";
import { Truck } from "lucide-react";

export function ShippingNote(): ReactElement {
  return (
    <Inline gap={2} align="center">
      <Icon icon={Truck} />
      <Text variant="body-sm">Ships in two days</Text>
    </Inline>
  );
}

Labels

An icon is hidden from screen readers unless it has a label, because the text beside it usually says the same thing. When an icon stands alone and means something, give it a label and it becomes an image named by it.

import type { ReactElement } from "react";
import { Icon } from "@butteryui/core";
import { TriangleAlert } from "lucide-react";

export function PaymentFailed(): ReactElement {
  return <Icon icon={TriangleAlert} label="Payment failed" />;
}

import type { ReactElement } from "react";
import { Icon, Inline, Text } from "@butteryui/core";
import { Truck } from "lucide-react";

export function Shipping(): ReactElement {
  return (
    <Inline gap={2} align="center">
      <Icon icon={Truck} label="Shipping" />
      <Text variant="body-sm">Shipping</Text>
    </Inline>
  );
}

The arrow and the spinner

Two drawn parts sit beside the icon set. Reach for them through Button's props first, and on their own only inside a control of your own.

• Arrow

  Arrow is the navigation arrow that Button and ArrowLink draw beside their label: a chevron, direction="forward" or "back", that grows a stem into an arrow while the control holding it, marked data-arrow, is hovered or focused. Only transforms change, so the control never changes size. On a Button, it's the arrow prop.

• Spinner

  Spinner is the small turning ring a busy control shows over its label, and it holds still with reduced motion. On a Button, it's the loading prop, which keeps the button's size while it's busy.

Icon