Icon Button

IconButton is a square button for a single icon: edit, delete, close, “more”. Because there is no visible text, aria-label is required by the types.

import { IconButton } from '@beyul/sulmu-ui'

Source · Figma

Examples

Variants

The default variant is ghost. The others match the Button variants.

import { Edit2Icon, Flex, IconButton } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center" wrap>
      <IconButton aria-label="Edit" variant="ghost" icon={<Edit2Icon />} />
      <IconButton aria-label="Edit" variant="primary" icon={<Edit2Icon />} />
      <IconButton aria-label="Edit" variant="secondary" icon={<Edit2Icon />} />
      <IconButton aria-label="Edit" variant="tertiary" icon={<Edit2Icon />} />
      <IconButton aria-label="Edit" variant="destructive" icon={<Edit2Icon />} />
    </Flex>
  )
}

Sizes and states

import { AddIcon, Edit2Icon, Flex, IconButton, ShareIcon, TrashIcon } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center" wrap>
      <IconButton aria-label="Add" variant="secondary" size="sm" icon={<AddIcon />} />
      <IconButton aria-label="Edit" variant="secondary" size="md" icon={<Edit2Icon size="sm" />} />
      <IconButton aria-label="Share" variant="secondary" size="lg" icon={<ShareIcon size="sm" />} />
      <IconButton aria-label="Saving" variant="primary" loading icon={<Edit2Icon />} />
      <IconButton aria-label="Delete" variant="secondary" disabled icon={<TrashIcon size="sm" />} />
    </Flex>
  )
}

Props

Prop	Type	Default	Description
aria-label*	string	-	Required: the accessible name, since there is no visible text.
icon*	ReactNode	-	The icon, e.g. <Edit2Icon />.
variant	"primary" | "secondary" | "tertiary" | "destructive" | "ghost"	ghost	Visual style. Default: ghost.
size	"sm" | "md" | "lg"	md	sm 32px, md 40px, lg 44px. Default: md.
loading	boolean	-
disabled	boolean	-

IconButton also accepts every button attribute.

Accessibility and usage

• aria-label names the action (“Edit product”), not the icon (“Pencil”).
• Add a Tooltip when the meaning of the icon is not obvious.
• loading replaces the icon with a spinner, disables the button and sets aria-busy.