FMX Prototype Pipeline

Icon Button

default/outline/ghost × default/sm. Optional notification dot. Tooltip from aria-label.

<IconButton
  icon={faBell}
  type="default"
  aria-label="Notifications"
/>

<IconButton
  icon={faBell}
  type="default"
  size="sm"
  aria-label="Notifications"
/>

<IconButton
  icon={faBell}
  type="default"
  disabled
  aria-label="Notifications"
/>

<IconButton
  icon={faBell}
  type="default"
  loading
  aria-label="Loading"
/>

<IconButton
  icon={faBell}
  aria-label="Notifications"
/>

<IconButton
  icon={faBell}
  type="ghost"
  aria-label="Notifications"
/>

<IconButton
  icon={faBell}
  size="sm"
  aria-label="Notifications"
/>

<IconButton
  icon={faBell}
  type="ghost"
  size="sm"
  aria-label="Notifications"
/>

<IconButton
  icon={faBell}
  loading
  aria-label="Loading"
/>

<IconButton
  icon={faBell}
  disabled
  aria-label="Notifications"
/>

<IconButton
  icon={faBell}
  showNotification
  aria-label="3 Notifications"
/>

<IconButton
  icon={faGear}
  aria-label="Settings"
  tooltipLocation="below"
/>

Props

icon:IconDefinition

Glyph to render (required).

type:"default" | "outline" | "ghost"= "outline"

Filled (primary), bordered, or flush.

size:"default" | "sm"= "default"

40px or 36px square tap target.

loading:boolean= false

Show a spinner; disables the button.

showNotification:boolean= false

Overlay a red dot at the top-right corner.

tooltipLocation:"above" | "below" | "left" | "right"= "above"

Tooltip placement.

Tokens