The Button component provides a versatile way to trigger actions or navigate within your application. It supports multiple variants, colors, and states including loading and disabled states.
Basic Usage
import { Button } from 'reshaped';
function App() {
return (
<Button variant="solid" color="primary">
Click me
</Button>
);
}
Variants
Button supports four visual variants:
<Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="faded">Faded</Button>
<Button color="primary">Primary</Button>
<Button color="critical">Critical</Button>
<Button color="positive">Positive</Button>
<Button color="neutral">Neutral</Button>
<Button color="media">Media</Button>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<Button size="xlarge">Extra Large</Button>
With Icons
Add icons to the start or end position:
import { Button } from 'reshaped';
import IconPlus from '@/icons/Plus';
import IconArrowRight from '@/icons/ArrowRight';
<Button icon={IconPlus}>Add Item</Button>
<Button endIcon={IconArrowRight}>Continue</Button>
<Button icon={IconPlus} /> {/* Icon only */}
Loading State
Show a loading indicator while an action is in progress:
<Button loading loadingAriaLabel="Loading...">
Submit
</Button>
Disabled State
Disable user interaction:
<Button disabled>Disabled</Button>
Highlighted State
Highlight the button when it represents an active state:
<Button highlighted>Active</Button>
Navigation
Use Button as a link by providing an href:
<Button href="/dashboard">Go to Dashboard</Button>
Styling Options
Rounded
Create a circular button:
import IconPlus from '@/icons/Plus';
<Button rounded icon={IconPlus} />
Elevated
Apply elevation shadow:
<Button elevated>Elevated Button</Button>
Full Width
Make the button take the full width of its container:
<Button fullWidth>Full Width Button</Button>
Button Group
Group multiple buttons together:
import { Button } from 'reshaped';
function App() {
return (
<Button.Group>
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
</Button.Group>
);
}
Button Aligner
Align a button to a specific side within a container:
import { Button } from 'reshaped';
function App() {
return (
<Button.Aligner side="end">
<Button>Aligned Button</Button>
</Button.Aligner>
);
}
variant
'solid' | 'outline' | 'ghost' | 'faded'
default:"solid"
Component render variant
color
'primary' | 'critical' | 'positive' | 'neutral' | 'media' | 'inherit'
default:"neutral"
Component color scheme
size
'small' | 'medium' | 'large' | 'xlarge'
default:"medium"
Component size (responsive)
SVG component for the icon at the start position
SVG component for the icon at the end position
aria-label attribute for the loading indicator
Change border radius to fully rounded corners
Apply elevated styles to the component
Make the component take the full width of the parent element (responsive)
Highlight the component when used for an active state
URL to navigate to when clicked
onClick
(event: React.MouseEvent) => void
Callback when the button is clicked
type
'button' | 'submit' | 'reset'
HTML button type attribute
Stop event propagation when clicked
Override the root element type
Custom render function for advanced use cases
Additional CSS class name
Additional HTML attributes
Button.Group
Node for inserting child Button components
Additional CSS class name
Additional HTML attributes
Button.Aligner
side
'start' | 'end' | 'inline'
Side to align the button to
children
React.ReactElement
required
Button element to align
Additional CSS class name
Additional HTML attributes