Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Button

Trigger an action or event, such as submitting a form or displaying a dialog.

View sourceReport an issueView in Playground
<Button>

  <BookmarkIcon width="16" height="16" /> Bookmark

</Button>

API Reference

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

PropTypeDefault
asChild
boolean
false
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

Examples

Size

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

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

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

    Edit profile

  </Button>

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

    Edit profile

  </Button>

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

    Edit profile

  </Button>

</Flex>

Variant

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

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

  <Button variant="classic">Edit profile</Button>

  <Button variant="solid">Edit profile</Button>

  <Button variant="soft">Edit profile</Button>

  <Button variant="surface">Edit profile</Button>

  <Button variant="outline">Edit profile</Button>

</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.

<Button variant="ghost">Edit profile</Button>

Color

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

<Flex gap="3">

  <Button color="indigo" variant="soft">

    Edit profile

  </Button>

  <Button color="cyan" variant="soft">

    Edit profile

  </Button>

  <Button color="orange" variant="soft">

    Edit profile

  </Button>

  <Button color="crimson" variant="soft">

    Edit profile

  </Button>

</Flex>

High-contrast

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

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

  <Flex gap="3">

    <Button variant="classic">Edit profile</Button>

    <Button variant="solid">Edit profile</Button>

    <Button variant="soft">Edit profile</Button>

    <Button variant="surface">Edit profile</Button>

    <Button variant="outline">Edit profile</Button>

  </Flex>

  <Flex gap="3">

    <Button variant="classic" highContrast>

      Edit profile

    </Button>

    <Button variant="solid" highContrast>

      Edit profile

    </Button>

    <Button variant="soft" highContrast>

      Edit profile

    </Button>

    <Button variant="surface" highContrast>

      Edit profile

    </Button>

    <Button variant="outline" highContrast>

      Edit profile

    </Button>

  </Flex>

</Flex>

Radius

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

<Flex gap="3">

  <Button radius="none" variant="soft">

    Edit profile

  </Button>

  <Button radius="large" variant="soft">

    Edit profile

  </Button>

  <Button radius="full" variant="soft">

    Edit profile

  </Button>

</Flex>

With icons

You can nest icons directly inside the button. An appropriate gap is provided automatically.

<Flex gap="3">

  <Button variant="classic">

    <BookmarkIcon width="16" height="16" /> Bookmark

  </Button>

  <Button variant="solid">

    <BookmarkIcon width="16" height="16" /> Bookmark

  </Button>

  <Button variant="soft">

    <BookmarkIcon width="16" height="16" /> Bookmark

  </Button>

  <Button variant="surface">

    <BookmarkIcon width="16" height="16" /> Bookmark

  </Button>

  <Button variant="outline">

    <BookmarkIcon width="16" height="16" /> Bookmark

  </Button>

</Flex>
PreviousBadge
NextCallout
Edit this page on GitHub.