Component

Icon button

A square button holding one icon, with a required accessible name.

stablev0.3.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.

bunx shadcn@3 add @fastrp/icon-button

Examples

Default

Open alone

API

<IconButton />

A square button holding one icon. `label` is required: an icon alone names nothing.

Prop	Type	Default	Notes
label*	string	—	What the button does — its accessible name, since there is no visible text.
color	LegacyColor	—	DeprecatedThe old colour axis — use `variant`.
loading	boolean	—	Hides the label behind a spinner and blocks clicks; the width stays.
size	"sm" \| "md" \| "lg"	md
sound	false \| UiSound	—	What a press sounds like, through `UiSoundsProvider`: `select` by default, `back` for a cancel, `false` for none. A purchase stays `select` — `success` is the server's answer, which the app plays when it comes.
variant	ButtonVariant \| "default" \| "destructive"	ghost

Dependencies

npm

None

Registry

@fastrp/button

Source

components/ds/icon-button.tsxShow

import { Button, type ButtonProps } from '@/components/ds/button';

// @fast-ds [email protected]

const SIZE = { sm: 'icon-sm', md: 'icon', lg: 'icon-lg' } as const;

export type IconButtonProps = Omit<ButtonProps, 'size' | 'caps' | 'asChild' | 'hotkey'> & {
  /** What the button does — its accessible name, since there is no visible text. */
  label: string;
  size?: keyof typeof SIZE;
};

/** A square button holding one icon. `label` is required: an icon alone names nothing. */
function IconButton({ label, size = 'md', variant = 'ghost', title, ...props }: IconButtonProps) {
  return (
    <Button
      data-slot="icon-button"
      aria-label={label}
      title={title ?? label}
      variant={variant}
      size={SIZE[size]}
      caps={false}
      {...props}
    />
  );
}

export { IconButton };