Components

Icon Button

IconButton is a button that renders an icon instead of text.

Since it's only an icon that's rendered, it's required to pass the aria-label prop, so that assistive technologies can give meaning to the button.

Import

import { IconButton } from '@outfitio/outkit';

Usage

Button variants

Just like the Button component, use the variant prop to change the visual style of the Button. You can set the value to solid, ghost, outline, or link.

Solid (default)

Outline

Ghost

Button sizes

Use the size prop to change the size of the icon button. You can set the value to sm, md, or lg.

Props

Name	Type	Default	Description
tooltip	`string`		As part of our design guidelines, all icon buttons require a tooltip.
tooltipProps	`object`		Object of props to apply to the tooltip component
size	`sm`, `md`, `lg`	`md`	Specifies an explicit icon size instead of the default value.
icon	`string`	`null`	The icon to be used. Refer to the Icons section of the docs for the available icon options.
isRound	`boolean`	`false`	If `true`, the button will be perfectly round. Else, it'll be slightly round.
aria-label (required)	`string`		A11y: A label that describes the button.
variant	`outline`, `ghost`, `unstyled` , `link` , `solid`	`solid`	The variant of the button style to use.
variantColor	`string`	`gray`	The color scheme of the button.
isDisabled	`boolean`		If `true`, the button will be disabled.
isLoading	`boolean`		If `true`, the button will show a spinner.