IconButton

Square, icon-only button built on Button; takes an icon node and a required label that's applied as aria-label and enforces type="button" by default.

stable
since v0.1.0
2.28 kB
forms
button

Preview

Open

tsx

import { IconButton } from '@arshad-shah/cynosure-react';

const CloseIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <line x1="18" y1="6" x2="6" y2="18" />
    <line x1="6" y1="6" x2="18" y2="18" />
  </svg>
);

export default function Example() {
  return <IconButton label="Close" icon={<CloseIcon />} />;
}

Variants

solid, soft, outline, ghost, and link mirror the Button variants. bare opts out of the Button recipe entirely and renders a plain <button> — useful for close buttons on dialogs that own their own styling.

Preview

Open

tsx

import { IconButton, Inline } from '@arshad-shah/cynosure-react';

const Plus = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
);

export default function Example() {
  return (
    <Inline gap="3">
      <IconButton label="Add" icon={<Plus />} variant="solid" />
      <IconButton label="Add" icon={<Plus />} variant="soft" />
      <IconButton label="Add" icon={<Plus />} variant="outline" />
      <IconButton label="Add" icon={<Plus />} variant="ghost" />
      <IconButton label="Add" icon={<Plus />} variant="link" />
    </Inline>
  );
}

Sizes

xs, sm, md (default), lg, and xl.

Preview

Open

tsx

import { IconButton, Inline } from '@arshad-shah/cynosure-react';

const Plus = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
);

export default function Example() {
  return (
    <Inline gap="3" align="center">
      <IconButton label="Add" icon={<Plus />} size="xs" />
      <IconButton label="Add" icon={<Plus />} size="sm" />
      <IconButton label="Add" icon={<Plus />} size="md" />
      <IconButton label="Add" icon={<Plus />} size="lg" />
      <IconButton label="Add" icon={<Plus />} size="xl" />
    </Inline>
  );
}

Color schemes

Pair variant with colorScheme (accent, neutral, success, warning, danger).

Preview

Open

tsx

import { IconButton, Inline, Stack } from '@arshad-shah/cynosure-react';

const Trash = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <polyline points="3 6 5 6 21 6" />
    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
    <path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />
  </svg>
);

export default function Example() {
  return (
    <Stack gap="3">
      <Inline gap="3">
        <IconButton label="Delete" icon={<Trash />} colorScheme="accent" />
        <IconButton label="Delete" icon={<Trash />} colorScheme="neutral" />
        <IconButton label="Delete" icon={<Trash />} colorScheme="success" />
        <IconButton label="Delete" icon={<Trash />} colorScheme="warning" />
        <IconButton label="Delete" icon={<Trash />} colorScheme="danger" />
      </Inline>
      <Inline gap="3">
        <IconButton label="Delete" icon={<Trash />} variant="soft" colorScheme="accent" />
        <IconButton label="Delete" icon={<Trash />} variant="soft" colorScheme="neutral" />
        <IconButton label="Delete" icon={<Trash />} variant="soft" colorScheme="success" />
        <IconButton label="Delete" icon={<Trash />} variant="soft" colorScheme="warning" />
        <IconButton label="Delete" icon={<Trash />} variant="soft" colorScheme="danger" />
      </Inline>
    </Stack>
  );
}

Shape

shape defaults to square for IconButton — set shape="pill" for a circular icon button.

Preview

Open

tsx

import { IconButton, Inline } from '@arshad-shah/cynosure-react';

const Search = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <circle cx="11" cy="11" r="8" />
    <line x1="21" y1="21" x2="16.65" y2="16.65" />
  </svg>
);

export default function Example() {
  return (
    <Inline gap="3" align="center">
      <IconButton label="Search" icon={<Search />} shape="square" />
      <IconButton label="Search" icon={<Search />} shape="pill" />
    </Inline>
  );
}

Disabled

Preview

Open

tsx

import { IconButton, Inline } from '@arshad-shah/cynosure-react';

const Plus = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
);

export default function Example() {
  return (
    <Inline gap="3">
      <IconButton label="Add" icon={<Plus />} disabled />
      <IconButton label="Add" icon={<Plus />} variant="soft" disabled />
      <IconButton label="Add" icon={<Plus />} variant="outline" disabled />
    </Inline>
  );
}

API

PropTypeDefaultDescription

colorScheme

"accent"|"neutral"|"success"|"danger"|"warning"

"accent"

Colour palette. `accent` is the brand colour; semantic schemes carry meaning (`danger` for destructive actions, `success` for confirmations).

size

"xs"|"sm"|"md"|"lg"|"xl"

"md"

Control size — affects height, padding, font size, and icon size. Available: `xs`, `sm`, `md`, `lg`, `xl`.

shape

"default"|"square"|"pill"

"default"

Geometry preset. `square` removes horizontal padding for icon-only buttons; `pill` rounds the corners to a fully-rounded radius.

fullWidth

boolean

—

Stretches the button to fill its container's inline size.

boolean

false

Renders a spinner inside the button and blocks interaction. The `disabled` and `aria-busy` attributes are set automatically.

asChild

boolean

—

When `true`, merges props onto the immediate child (Radix `Slot` pattern) instead of rendering a `<button>`. Useful for rendering `<Link>`s that look like buttons.

className

string

—

style

CSSProperties

—

variant

—

icon*

ReactNode

—

The icon element — typically a Cynosure icon or an inline SVG.

label*

string

—

Accessible label — announced in place of textual content. Required.

Accessibility

label is required and forwarded as aria-label — there is no visible text content, so the label is the control’s accessible name.
The component enforces type="button" by default to prevent accidental form submission.
Mark the inner SVG aria-hidden="true" so screen readers don’t announce a duplicate of the label.
shape defaults to square; the underlying Button still keeps a comfortable hit target at every size.
Pair with a Tooltip to surface the label on hover for sighted users while keeping it announced to assistive tech.

Recipes

Use variant="bare" for close / clear buttons inside dialogs and inputs where a parent recipe owns the styling.
Match the SVG stroke to currentColor so the icon picks up the button’s contextual colour.
Drop IconButtons into a ButtonGroup for compact toolbars — variant and size flow through the group context.