Icon button

Icon buttons are controls that let users take action, make choices, and move forward.

<IconButton icon={<IconPlusOutline18 />} />

Variants

The IconButton comes with three variants: primary (default), secondary, and ghost.

<IconButton icon={<IconPlusOutline18 />} variant="primary" />
<IconButton icon={<IconPlusOutline18 />} variant="secondary" />
<IconButton icon={<IconPlusOutline18 />} variant="ghost" />

Size

The IconButton comes with 5 sizes: 32, 36, 40 (default), 44, and 48.

<IconButton icon={<IconPlusOutline18 />} size={32} />
<IconButton icon={<IconPlusOutline18 />} size={36} />
<IconButton icon={<IconPlusOutline18 />} size={40} />
<IconButton icon={<IconPlusOutline18 />} size={44} />
<IconButton icon={<IconPlusOutline18 />} size={48} />

Icons

<IconButton icon={<IconPlusOutline18 />} />

Disabled

Use the disabled prop to prevent a button from being interacted with. Disabled buttons communicate that an action is currently unavailable.

<IconButton disabled icon={<IconPlusOutline18 />} variant="primary" />
<IconButton disabled icon={<IconPlusOutline18 />} variant="secondary" />
<IconButton disabled icon={<IconPlusOutline18 />} variant="ghost" />

Loading

Use the loading prop to indicate that an action is in progress. While loading, the button shows a spinner and cannot be interacted with.

Do not add disabled when using loading, as the button is automatically non-interactive while loading.

<IconButton icon={<IconPlusOutline18 />} loading variant="primary" />
<IconButton icon={<IconPlusOutline18 />} loading variant="secondary" />
<IconButton icon={<IconPlusOutline18 />} loading variant="ghost" />

Rounded

Use the rounded prop to give the button fully rounded corners.

<IconButton icon={<IconPlusOutline18 />} rounded variant="primary" />
<IconButton icon={<IconPlusOutline18 />} rounded variant="secondary" />
<IconButton icon={<IconPlusOutline18 />} rounded variant="ghost" />

Icon button

Use the IconButton component to create a button that only shows an icon.

<IconButton icon={<IconPlusOutline18 />} variant="primary" />
<IconButton icon={<IconPlusOutline18 />} variant="secondary" />
<IconButton icon={<IconPlusOutline18 />} variant="ghost" />