GroupCollect 1.3.252
- 1.1.0

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.

Forms

The button renders as type="button", so it is safe inside a form. Pass type="submit" when it should submit the form.

Primary Open in playground 
<.icon_button label="Open calendar" primary icon="calendar-blank"/>
<.icon_button label="Open calendar" primary icon="calendar-blank" badge={7}/>
<.icon_button disabled label="Open calendar" primary icon="calendar-blank"/>
<.icon_button disabled label="Open calendar" primary icon="calendar-blank" badge={2}/>
Secondary Open in playground 
<.icon_button label="Open calendar" icon="calendar-blank"/>
<.icon_button label="Open calendar" icon="calendar-blank" badge={5}/>
<.icon_button disabled label="Open calendar" primary icon="calendar-blank"/>
<.icon_button disabled label="Open calendar" primary icon="calendar-blank" badge={1}/>
Small Open in playground 
<.icon_button label="Open calendar" size="sm" primary icon="calendar-blank"/>
<.icon_button label="Open calendar" size="sm" primary icon="calendar-blank" badge={5}/>
<.icon_button label="Open calendar" size="sm" icon="calendar-blank" secondary/>
<.icon_button label="Open calendar" size="sm" icon="calendar-blank" badge={7} secondary/>
<.icon_button disabled label="Open calendar" size="sm" primary icon="calendar-blank"/>
<.icon_button
  disabled
  label="Open calendar"
  size="sm"
  primary
  icon="calendar-blank"
  badge={10}
/>