Icon Button

The IconButton component can be used to create a button with an icon.

Properties

Name
Default
Description
size
medium
The size of the button. One of:
  • small (26px)
  • medium (30px)
  • large (36px)
  • a number in pixels
color
accent
The color of the button. One of:
  • accent
  • gray
  • input (fill and invisible only)
  • green
  • red
  • blue
  • orange
variant
fill
The variant of the button. One of:
  • fill
  • fill-light
  • outline
  • outline-fill
  • invisible
as
button
The element to render the button as. Can be button or a.
disabled
false
Icon Button's disabled state

Examples

Sizes

<IconButton size="small"><IconSearch /></IconButton>
<IconButton size="medium"><IconSearch /></IconButton>
<IconButton size="large"><IconSearch /></IconButton>
<IconButton size={50}><IconSearch /></IconButton>

Colors

<IconButton color="accent"><IconSearch /></IconButton>
<IconButton color="gray"><IconSearch /></IconButton>
<IconButton color="input"><IconSearch /></IconButton>
<IconButton color="green"><IconSearch /></IconButton>
<IconButton color="red"><IconSearch /></IconButton>
<IconButton color="blue"><IconSearch /></IconButton>
<IconButton color="orange"><IconSearch /></IconButton>

Variants

Fill

<IconButton variant="fill" color="accent"><IconSearch /></IconButton>
<IconButton variant="fill" color="gray"><IconSearch /></IconButton>
<IconButton variant="fill" color="input"><IconSearch /></IconButton>
<IconButton variant="fill" color="green"><IconSearch /></IconButton>
<IconButton variant="fill" color="red"><IconSearch /></IconButton>
<IconButton variant="fill" color="blue"><IconSearch /></IconButton>
<IconButton variant="fill" color="orange"><IconSearch /></IconButton>
`

Fill Light

<IconButton variant="fill-light" color="accent"><IconSearch /></IconButton>
<IconButton variant="fill-light" color="gray"><IconSearch /></IconButton>
<IconButton variant="fill-light" color="green"><IconSearch /></IconButton>
<IconButton variant="fill-light" color="red"><IconSearch /></IconButton>
<IconButton variant="fill-light" color="blue"><IconSearch /></IconButton>
<IconButton variant="fill-light" color="orange"><IconSearch /></IconButton>

Outline

<IconButton variant="outline" color="accent"><IconSearch /></IconButton>
<IconButton variant="outline" color="gray"><IconSearch /></IconButton>
<IconButton variant="outline" color="green"><IconSearch /></IconButton>
<IconButton variant="outline" color="red"><IconSearch /></IconButton>
<IconButton variant="outline" color="blue"><IconSearch /></IconButton>
<IconButton variant="outline" color="orange"><IconSearch /></IconButton>

Outline Fill

<IconButton variant="outline-fill" color="accent"><IconSearch /></IconButton>
<IconButton variant="outline-fill" color="gray"><IconSearch /></IconButton>
<IconButton variant="outline-fill" color="green"><IconSearch /></IconButton>
<IconButton variant="outline-fill" color="red"><IconSearch /></IconButton>
<IconButton variant="outline-fill" color="blue"><IconSearch /></IconButton>
<IconButton variant="outline-fill" color="orange"><IconSearch /></IconButton>

Invisible

<IconButton variant="invisible" color="accent"><IconSearch /></IconButton>
<IconButton variant="invisible" color="gray"><IconSearch /></IconButton>
<IconButton variant="invisible" color="input"><IconSearch /></IconButton>
<IconButton variant="invisible" color="green"><IconSearch /></IconButton>
<IconButton variant="invisible" color="red"><IconSearch /></IconButton>
<IconButton variant="invisible" color="blue"><IconSearch /></IconButton>
<IconButton variant="invisible" color="orange"><IconSearch /></IconButton>
<IconButton 
    as="a" 
    href="https://hyvor.com" 
    target="_blank"
><IconBoxArrowUpRight /></IconButton>

Disabled

<IconButton
    variant="fill" 
    color="red" 
    disabled
>
    <IconSearch />
</IconButton>