IconButton

Live demo

How to use it

A square button holding one icon, for toolbars, headers and compact rows.

Provide icon and label; the label is the accessible name and tooltip, so it is required.
ghost (default) for toolbars, secondary when it needs a visible boundary, primary for a floating create action.
Keep the 44px touch minimum on mobile: use size="lg" or pad the hit area.

Don't: use an icon button where a text label would be clearer.

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { IconButton } from 'enma/react';

<IconButton icon="bell" label="Notifications" />
<IconButton icon="settings" label="Settings" variant="secondary" />
<IconButton icon="plus" label="New workout" variant="primary" size="lg" />

Plain HTML

<button type="button" class="e-iconbtn e-sq e-iconbtn--ghost e-iconbtn--md" aria-label="Notifications" title="Notifications">
  <svg class="e-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M6 16V11a6 6 0 1 1 12 0v5l2 2H4zM10 21h4" />
  </svg>
</button>

Props

`IconButtonProps`

Also accepts every attribute of React.ButtonHTMLAttributes<HTMLButtonElement>.

Props of IconButtonProps
Prop	Type	Default	Description
`icon` required	IconName
`label` required	string		Required accessible name, also shown as the tooltip.
`variant`	'ghost' \| 'secondary' \| 'primary'	'ghost'
`size`	'sm' \| 'md' \| 'lg'	'md'