IconButton

import { IconButton } from '@tulsa/core';

<IconButton variant={"Primary"} icon={<BiSearch size={"1em"} color="inherit" />} />
<IconButton variant={"Secondary"} icon={<BiSearch size={"1em"} color="inherit" />} />
<IconButton variant={"Invisible"} icon={<BiSearch size={"1em"} color="inherit" />} />

Props

Name	Type	Description	Default
icon*	React.ReactElement	Controls the icon that is displayed. Must be a React Element.
size	'xs' | 'sm' | 'lg'	Controls the relative size of the button	"sm"
circle	boolean	If true, makes the IconButton appear as a circle as opposed to a rounded square.
variant	'Primary' | 'Secondary' | 'Invisible'	Controls the look & feel of the button	'Primary'
as	T	Controls the root element that is used by the button. Can be an HTML element string or a React component.	"button"
selected	boolean	Sets whether or not the button is displayed as selected or not. Particularly useful in a `ButtonGroup`

Native props are forwarded to the root component.

Examples

Circle

<IconButton circle icon={<BiSearch size={"1em"} color="inherit" />} />

Sizes

<IconButton size={"xs"} icon={<BiSearch size={"1em"} color="inherit" />} />
<IconButton size={"sm"} icon={<BiSearch size={"1em"} color="inherit" />} />
<IconButton size={"lg"} icon={<BiSearch size={"1em"} color="inherit" />} />