GroupCollect 1.3.142

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.

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" secondary badge={7}/>
<.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}
/>