Icon Button

Renders an icon button component

Read more Read less

An icon button differs from a regular button in that it must contain an icon and it may not contain text:

<.icon_button icon="plus" label="Add item" />

It can be a floating action button:

<.icon_button floating icon="plus" label="Add item" />

It can also have a count badge:

<.icon_button icon="plus" label="Add item" badge={4} />

Accessible naming

Icon-only buttons have no visible text, so label is required to provide an accessible name for screen readers.

Attribute Type Documentation Default Value
primary :boolean

Renders primary button

false
secondary :boolean

Renders secondary button

false
floating :boolean false
Required icon * :string
Required label * :string
badge :integer 0
size :string "base"
rest :global