FMX Prototype Pipeline

Toggle Button

Pressed/unpressed button (aria-pressed) — outline/ghost × default/sm. Click any to toggle; on = soft gray fill.

<ToggleButton icon={faFilter}>
  Filter
</ToggleButton>

<ToggleButton icon={faFilter} defaultPressed>
  Filter
</ToggleButton>

<ToggleButton icon={faFilter} disabled>
  Filter
</ToggleButton>

<ToggleButton type="ghost" icon={faBars}>
  Compact
</ToggleButton>

<ToggleButton type="ghost" icon={faBars} defaultPressed>
  Compact
</ToggleButton>

<ToggleButton type="ghost" icon={faBars} disabled>
  Compact
</ToggleButton>

<ToggleButton size="sm" icon={faFilter}>
  Filter
</ToggleButton>

<ToggleButton type="ghost" size="sm" icon={faBars} defaultPressed>
  Compact
</ToggleButton>

Props

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

Bordered or flush at rest.

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

40px min-height (default) or 36px (sm).

pressed:boolean

Controlled on/off state (with onPressedChange).

defaultPressed:boolean= false

Uncontrolled initial state.

onPressedChange:(pressed: boolean, e) => void

Fires with the next state on click.

icon:IconDefinition

Leading icon glyph.

disabled:boolean= false

Disabled state — muted opacity.

Tokens