Button designed specifically for usage with a single icon.
This component is based on the button
element and supports common margin props.
Prop | Type | Default |
---|---|---|
asChild | boolean | |
size | Responsive<"1" | "2" | "3" | "4"> | "2" |
variant | enum | "solid" |
color | enum | |
highContrast | boolean | |
radius | "none" | "small" | "medium" | "large" | "full" | |
loading | boolean | false |
Use the size
prop to control the size of the button.
Use the variant
prop to control the visual style of the button.
Currently, we recommend using only the solid
, outline
and ghost
variant following the ScaleUI Radix design system.
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.
Use the color
prop to assign a specific color.
Use the radius
prop to assign a specific radius value.
Use the loading
prop to display a loading spinner in place of button content. The button will be disabled while loading.