Icon Button

Button designed specifically for usage with a single icon.

<IconButton>
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>

API Reference

This component is based on the button element and supports common margin props.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3" | "4">
"2"
variant
enum
"solid"
color
enum
No default value
highContrast
boolean
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value
loading
boolean
false

Examples

Size

Use the size prop to control the size of the button.

<Flex align="center" gap="3">
<IconButton size="1" variant="soft">
<MagnifyingGlassIcon width="15" height="15" />
</IconButton>
<IconButton size="2" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton size="3" variant="soft">
<MagnifyingGlassIcon width="22" height="22" />
</IconButton>
</Flex>

Variant

Use the variant prop to control the visual style of the button.

<Flex gap="3">
<IconButton variant="classic">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton variant="solid">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton variant="surface">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton variant="outline">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
</Flex>

Ghost

Use the ghost variant to display a button without chrome. Ghost buttons behave like text in layout, as they use a negative margin to optically align themselves against their siblings while maintaining the padding in active and hover states.

<IconButton variant="ghost">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>

Color

Use the color prop to assign a specific color.

<Flex gap="3">
<IconButton color="crimson" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="indigo" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="grass" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="orange" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.

<Flex direction="column" gap="3">
<Flex gap="3">
<IconButton color="gray" variant="classic">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="gray" variant="solid">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="gray" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="gray" variant="surface">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="gray" variant="outline">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
</Flex>
<Flex gap="3">
<IconButton color="gray" variant="classic" highContrast>
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="gray" variant="solid" highContrast>
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="gray" variant="soft" highContrast>
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="gray" variant="surface" highContrast>
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton color="gray" variant="outline" highContrast>
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
</Flex>
</Flex>

Radius

Use the radius prop to assign a specific radius value.

<Flex gap="3">
<IconButton radius="none" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton radius="large" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton radius="full" variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
</Flex>

Loading

Use the loading prop to display a loading spinner in place of button content. The button will be disabled while loading.

<Flex gap="3">
<IconButton loading variant="classic">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton loading variant="solid">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton loading variant="soft">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton loading variant="surface">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
<IconButton loading variant="outline">
<MagnifyingGlassIcon width="18" height="18" />
</IconButton>
</Flex>
PreviousHover Card
NextInset