Icon button

An icon button is a button that shows an icon instead of a label. Always give it a label so the action is announced.

#Appearance

An icon button takes the same appearances as a button.

import { IconButton } from '@wolf-rayet/react';

<IconButton icon={<Plus />} label="Create" />
<IconButton icon={<Plus />} label="Create" appearance="primary" />
<IconButton icon={<Plus />} label="Create" appearance="subtle" />
<IconButton icon={<Plus />} label="Delete" appearance="danger" />

#Shape

Use a circle where the button sits over an image or an avatar.

import { IconButton } from '@wolf-rayet/react';

<IconButton icon={<Plus />} label="Create" shape="circle" appearance="primary" />

#Spacing

Use compact spacing in a toolbar or a table row.

import { IconButton } from '@wolf-rayet/react';

<IconButton icon={<Plus />} label="Create" spacing="compact" />

#Disabled

Use a disabled icon button when the action is unavailable.

import { IconButton } from '@wolf-rayet/react';

<IconButton icon={<Plus />} label="Create" isDisabled />