Icon Button basic usage
Icon Button is a component designed specifically for usage with a single icon. It is based on the button element and supports common margin props.
Radix Primitives · all subjects
icon-button
16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Icon Button size prop
The size prop controls the size of the button. Valid values are 1, 2, and 3.
Icon Button variant prop
The variant prop controls the visual style of the button. Valid values are classic, solid, soft, surface, outline, and ghost.
Icon Button ghost variant layout behavior
The ghost variant displays 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.
Icon Button color prop
The color prop assigns a specific color to the button. Valid color values include crimson, indigo, grass, orange, and gray, among others from the theme's color palette.
Icon Button highContrast prop
The highContrast prop increases color contrast with the background when set to true.
Icon Button radius prop
The radius prop assigns a specific radius value to the button. Valid values are none, large, and full.
Icon Button loading prop
The loading prop displays a loading spinner in place of button content. The button will be disabled while loading is true.
Icon Button basic example
This example shows a basic Icon Button component containing a MagnifyingGlassIcon with width and height of 18. ```jsx <IconButton> <MagnifyingGlassIcon width="18" height="18" /> </IconButton> ```
Icon Button size variants example
This example demonstrates Icon Button with different size values (1, 2, 3) and soft variant. ```jsx <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> ```
Icon Button variant options example
This example demonstrates Icon Button with all variant options: classic, solid, soft, surface, and outline. ```jsx <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> ```
Icon Button ghost variant example
This example demonstrates the ghost variant of Icon Button. ```jsx <IconButton variant="ghost"> <MagnifyingGlassIcon width="18" height="18" /> </IconButton> ```
Icon Button color options example
This example demonstrates Icon Button with different color values (crimson, indigo, grass, orange) using the soft variant. ```jsx <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> ```
Icon Button highContrast example
This example demonstrates Icon Button with highContrast prop set to true, compared to the default non-high-contrast variants. ```jsx <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> ```
Icon Button radius options example
This example demonstrates Icon Button with different radius values (none, large, full) using the soft variant. ```jsx <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> ```
Icon Button loading state example
This example demonstrates Icon Button with the loading prop set to true, which displays a loading spinner in place of button content and disables the button. ```jsx <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> ```