Skip to content
Action

IconButton

Icon-only button for compact toolbars and controls.

React source Core source

IconButton

Icon-only button for compact toolbars and controls. Shares tone / appearance / intent / size with Button, and always uses layout="icon". Pair with ButtonGroup or Toolbar for dense action rows.

Examples

Default

Pass a semantic name from the icon registry and a required aria-label — the control has no visible text.

Demo.tsxtsx
import { IconButton } from '@var-ui/react';

<IconButton name="close" aria-label="Close" />

Sizes and intents

Use size (sm / md / lg) and the same intent shorthand as Button (primary, secondary, ghost, danger, …).
Demo.tsxtsx
import { HStack, IconButton, VStack } from '@var-ui/react';

<VStack gap="lg">
  <HStack gap="sm">
    <IconButton name="search" aria-label="Search small" size="sm" />
    <IconButton name="search" aria-label="Search medium" size="md" />
    <IconButton name="search" aria-label="Search large" size="lg" />
  </HStack>
  <HStack gap="sm">
    <IconButton name="close" aria-label="Close" intent="secondary" />
    <IconButton name="search" aria-label="Search" intent="primary" />
    <IconButton name="menu" aria-label="Menu" intent="ghost" />
    <IconButton name="close" aria-label="Delete" intent="danger" />
  </HStack>
</VStack>

Props

Accessibility

aria-label is required because there is no text content. Built on React Aria Button, so keyboard activation and disabled semantics match Button. Prefer a short action name (“Close”, “Search”) over describing the glyph.