FMX Prototype Pipeline

Button

default/outline/ghost × default/sm × enabled/disabled/loading + leading icon.

<Button>Submit</Button>

<Button disabled>Submit</Button>

<Button loading>Submit</Button>

<Button variant="outline">Cancel</Button>

<Button variant="outline" disabled>Cancel</Button>

<Button variant="outline" loading>Cancel</Button>

<Button variant="ghost">View details</Button>

<Button variant="ghost" disabled>
  View details
</Button>

<Button variant="ghost" loading>
  View details
</Button>

<Button size="sm">Submit</Button>

<Button variant="outline" size="sm">
  Cancel
</Button>

<Button variant="ghost" size="sm">
  View details
</Button>

<Button icon={faDownload}>Download</Button>

<Button variant="outline" icon={faPlus}>
  Add item
</Button>

<Button variant="ghost" icon={faPencil}>
  Edit
</Button>

Props

variant:"default" | "outline" | "ghost"= "default"

Visual treatment. default=primary fill, outline=bordered, ghost=flush.

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

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

icon:IconDefinition

Leading icon glyph.

loading:boolean= false

Replaces label with a spinner and disables the button.

disabled:boolean= false

Standard disabled state.

tooltip:ReactNode | false

Tooltip text on hover/focus. false opts out.

buttonType:"button" | "submit" | "reset"= "button"

Native form button type.

Tokens