Marble UI
← Components

Icon Button

Preview: Ghost

Button with only an icon; aria-label is required.

Import

import { IconButton } from '@marbleui/ui'

Props

<IconButton>

PropTypeDefaultDescription
aria-label *requiredstring—Icon-only buttons need an accessible name.
shape'circle' | 'square''square'
size'sm' | 'md' | 'lg''md'
variant'soft' | 'outline' | 'danger' | 'solid' | 'ghost''ghost'

Also accepts React Aria props (112).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Square or round button that holds only an icon. aria-label is required because there is no visible text.

<IconButton aria-label="Archive" variant="ghost"><ArchiveIcon /></IconButton>
  • Pair with a Tooltip showing the same text as the label for sighted mouse users.
  • Keep icons decorative (aria-hidden); the label is the accessible name.
Example source · show
import { IconButton } from './icon-button'

const icons = {
  bell: 'M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0',
  search: 'm21 21-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16',
  more: 'M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2M5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2',
}
const Icon = ({ d }: { d: string }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
    <path d={d} />
  </svg>
)

export const styles = {
  Ghost: () => (
    <div className="flex gap-1">
      <IconButton aria-label="Search"><Icon d={icons.search} /></IconButton>
      <IconButton aria-label="Notifications"><Icon d={icons.bell} /></IconButton>
      <IconButton aria-label="More"><Icon d={icons.more} /></IconButton>
    </div>
  ),
  Outline: () => (
    <div className="flex gap-2">
      <IconButton variant="outline" aria-label="Search"><Icon d={icons.search} /></IconButton>
      <IconButton variant="outline" shape="circle" aria-label="Notifications"><Icon d={icons.bell} /></IconButton>
    </div>
  ),
  Solid: () => (
    <div className="flex items-center gap-2">
      <IconButton variant="solid" size="sm" aria-label="Search"><Icon d={icons.search} /></IconButton>
      <IconButton variant="solid" aria-label="Search"><Icon d={icons.search} /></IconButton>
      <IconButton variant="solid" size="lg" shape="circle" aria-label="Search"><Icon d={icons.search} /></IconButton>
    </div>
  ),
}

Source: packages/ui/src/icon-button/icon-button.tsx

Catalog

Category
inputs
Priority
Foundation
Primitive
composed
React Aria
Button
Base UI
Button