Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Icon Button

A button designed specifically for usage with a single icon.

View sourceReport an issueView in Playground
<IconButton>

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

</IconButton>

API Reference

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

PropTypeDefault
asChildbooleanfalse
sizeResponsive<"1" | "2" | "3" | "4">"2"
variantenum"solid"
colorenumNo default value
highContrastbooleanNo default value
radius"none" | "small" | "medium" | "large" | "full"No default value

Examples

Size

Use the size prop to control the size.

<Flex align="center" gap="3">

  <IconButton size="3" variant="soft">

    <MagnifyingGlassIcon width="22" height="22" />

  </IconButton>



  <IconButton size="2" variant="soft">

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

  </IconButton>



  <IconButton size="1" variant="soft">

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

  </IconButton>

</Flex>

Variant

Use the variant prop to control the visual style.

<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="outline">

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

  </IconButton>

  <IconButton variant="surface">

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

  </IconButton>

</Flex>

Ghost

Use the ghost variant to render the button without a visually containing element. Ghost buttons behave differently in layout as they use a negative margin to optically align themselves against their siblings while maintaining their padded active and hover states.

<Flex gap="3" align="center">

  <IconButton variant="solid">

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

  </IconButton>

  <IconButton variant="ghost">

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

  </IconButton>

</Flex>

Color

Use the color prop to assign a specific color, ignoring the global theme.

<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 add additional contrast.

<Flex direction="column" gap="3">

  <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="outline">

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

    </IconButton>

    <IconButton variant="surface">

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

    </IconButton>

  </Flex>

  <Flex gap="3">

    <IconButton variant="classic" highContrast>

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

    </IconButton>

    <IconButton variant="solid" highContrast>

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

    </IconButton>

    <IconButton variant="soft" highContrast>

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

    </IconButton>

    <IconButton variant="outline" highContrast>

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

    </IconButton>

    <IconButton variant="surface" highContrast>

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

    </IconButton>

  </Flex>

</Flex>

Radius

Use the radius prop to assign a specific radius value, ignoring the global theme.

<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>
PreviousHover Card
NextInset
Edit this page on GitHub.