ButtonIcon

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	ReactNode	-	No
isDisabled	boolean	false	No
type	buttonsubmitreset	button	No
className	string	-	No
style	CSSProperties	-	No

Examples

Variants

Here's a view when buttons have different variants.

<Flex align="center">
  <ButtonIcon icon={<Icon name="cloud" />} variant="primary" />
  <ButtonIcon icon={<Icon name="cloud" />} variant="secondary" />
</Flex>

Sizes

Here's a view when buttons have different sizes.

<Flex align="center">
  <ButtonIcon icon={<Icon name="cloud" />} size="small" />
  <ButtonIcon icon={<Icon name="cloud" />} size="medium" />
</Flex>

Disabled

Here's a view when buttons are disabled.

<ButtonIcon icon={<Icon name="cloud" />} isDisabled />

Responsive

Here's a view when buttons are responsive.

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