Button Properties
A versatile button component with various styles, sizes, and states. Built on Radix UI's Slot primitive for flexibility and accessibility.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Button component
Copy this code to create your Button component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Rounded Full
For designs requiring pill-shaped buttons, enable the roundedFull prop. This creates buttons with fully rounded corners, ideal for floating action buttons, icon buttons, or to create visual distinction.
Variants
Buttons come in four visual variants to communicate different levels of emphasis. The default variant has the strongest visual weight, while stroke, lighter, and ghost provide progressively subtler alternatives for secondary actions.
Colors
Colors provide semantic meaning to button actions. Use blue for primary actions, neutral for secondary actions, danger for destructive operations, and success for confirmation or completion actions. Each color can be combined with any variant.
default
stroke
lighter
ghost
Sizes
Buttons are available in four sizes to accommodate different UI contexts. Choose from large, medium (default), small, and x-small to create visual hierarchy or fit specific layout constraints.
With Icons
Enhance visual communication by adding icons to your buttons. The Button.Icon component can be positioned before text, after text, on both sides, or used alone for icon-only buttons. Icons automatically adapt to the button's size.
Icon Examples
The following examples demonstrate how icons adapt to different button sizes, colors, and variants. This comprehensive overview shows all possible combinations to help you choose the right button style for your interface.
default
stroke
lighter
ghost
API Reference
The Button component is built on top of the Radix UI Slot primitive and provides a flexible way to create interactive elements. See the Radix UI Slot documentation for more details on the base component.
Button.Root
Main button component with support for various styles, colors, and sizes.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""stroke""lighter""ghost" | "default" | Visual style variant of the button |
color | "blue""neutral""danger""success" | "blue" | Color theme of the button |
size | "large""medium""small""x-small" | "medium" | Size of the button |
roundedFull | "boolean" | "false" | Whether to use fully rounded corners (pill shape) |
disabled | "boolean" | "false" | Whether the button is disabled |
asChild | "boolean" | "false" | Whether to merge props onto child component |
Button.Icon
Adds an icon to the button with proper sizing and positioning.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactElement" | "undefined" | Icon component to render |
position | "left""right" | "left" | Position of the icon relative to text |
size | "large""medium""small""x-small" | "from Button" | Size of the icon, defaults to parent Button size |