Icon Button

IconButton composes the Button component, except that it renders only an icon.

Since it's only an icon that's rendered, it's required to pass the label prop, so screen readers can give meaning to the button.

Import

import { IconButton } from '@sajari-ui/core';

import { IconButton } from '@sajari-ui/core';

<IconButton icon="search" label="Search" />

<IconButton icon="search" label="Search" />

The IconButton component accepts most of the props from the Button component so we can use appearance prop to change the color of the button.

<IconButton icon="search" label="Search" appearance="primary" />

<IconButton icon="search" label="Search" appearance="primary" />

Just like the Button component, pass the size and iconSize props to change the size of the button and icon.

<IconButton icon="search" label="Search" size="lg" iconSize="lg" />

<IconButton icon="search" label="Search" size="lg" iconSize="lg" />

Name	Type	Default	Description
`icon` (required)	`IconProps['name']`		The icon to be used. Refer to the Icons section of the docs for the available icon options.
`iconSize`	`IconProps['size']`		Shorthand to set both `iconBeforeSize` and `iconAfterSize`.
`rounded`	`boolean`	`false`	If `true`, the button will be perfectly round. Else, it'll be slightly round.
`label` (required)	`string`		A11y: A label that describes the button.
`appearance`	`default`, `primary`, `secondary`, `success`, `warning`, `danger`, `ghost`, `link`, `subtle-link`, `none`	`default`	The variant of the button style to use.
`disabled`	`boolean`		If `true`, the button will be disabled.
`loading`	`boolean`		If `true`, the button will show a spinner.
`loadingText`	`string`		The label to show in the button when `loading` is true. If no text is passed, it only shows the spinner
`size`	`xs`, `sm`, `md`, `lg` , `xl`	`md`	The size of the button.