Icon Button

A button component with a single icon that can be used to trigger actions.

API reference

Prop	Type	Default	Responsive
variant	primarysecondary	primary	Yes
size	smallmedium	medium	Yes
icon	account-circlealertarrow-downarrow-down-circlecaret-downcaret-leftcaret-rightcaret-uparrow-leftarrow-left-circlearrow-left-downarrow-left-uparrow-rightarrow-right-circlearrow-right-downarrow-right-uparrow-uparrow-up-circlebracesbracketsbugcheckcheck-doublechevron-downchevron-leftchevron-rightchevron-upcloudcodediscorddownloadexternal-linkeyeeye-offfilterflowergithubgit-repositorygroupheartmoonplussidebar-foldsidebar-unfoldsparklingstarsunterminaltrashuploaduseryoutubezoom-inzoom-out	-	No
className	string	-	No
style	CSSProperties	-	No

Here's a view when buttons have different variants.

<Flex align="center">
  <IconButton icon="cloud" variant="primary" />
  <IconButton icon="cloud" variant="secondary" />
</Flex>

Here's a view when buttons have different sizes.

<Flex align="center">
  <IconButton icon="cloud" size="small" />
  <IconButton icon="cloud" size="medium" />
</Flex>

Here's a view when buttons are disabled.

<IconButton icon="cloud" disabled />

Here's a view when buttons are responsive.

<IconButton icon="cloud" variant={{ initial: 'primary', lg: 'secondary' }} />