UI Lab Button
The Button component is one of the most fundamental interactive elements in UI Lab. It supports multiple variants, sizes, and states to cover all your interface needs.
Usage
import { Button } from '@ui-lab/components';function MyComponent() {
return (
<Button variant="primary" size="medium">
Click Me
</Button>
);
}API Reference
'primary' | 'secondary' | 'outline' | 'ghost' | 'link'Defines the visual style variant of the button, offering a range of options to suit different use cases: "primary" for the main call-to-action, "secondary" for alternative actions, "outline" for bordered styles, "ghost" for minimalistic designs, and "link" for text-based hyperlinks.
'small' | 'medium' | 'large'Specifies the button size, providing "small" for compact layouts, "medium" as the default for general use, and "large" for emphasized actions.
() => voidA callback function triggered when the button is clicked, allowing for custom actions or logic to be executed.
ReactNodeThe content to be displayed inside the button, such as text, icons, or a combination of both, enabling flexible and dynamic button labeling.
stringAllows the addition of custom CSS classes to the button for further styling or integration with external CSS frameworks.
Variants
The Button component supports 5 different visual styles:
- Primary: The main call-to-action button with solid background
- Secondary: Alternative action button with subtle styling
- Outline: Transparent background with border for secondary actions
- Ghost: Minimal styling for tertiary actions
- Link: Text-only style that looks like a hyperlink
Sizes
3 size options are available:
- Small: Compact size for tight spaces
- Medium (Default): Default size for most use cases
- Large: Prominent size for primary actions
Accessibility
- Fully keyboard navigable with standard Tab and Enter/Space key support
- Proper ARIA attributes for screen readers
- Focus indicators for keyboard navigation
- Semantic HTML button element by default
Customization
The button component uses CSS variables from the design system. You can customize colors by overriding the base color tokens in your theme configuration.
Form Actions
<div className="flex gap-3">
<Button variant="primary" size="medium">
Submit
</Button>
<Button variant="ghost" size="medium">
Cancel
</Button>
</div>Call to Action
<div className="flex gap-3">
<Button variant="primary" size="large">
Get Started
</Button>
<Button variant="outline" size="large">
Learn More
</Button>
</div>Navigation Actions
<div className="flex gap-3">
<Button variant="link" size="small">
Back to home
</Button>
<Button variant="ghost" size="small">
Skip
</Button>
</div>Toolbar Actions
<div className="flex gap-2">
<Button variant="secondary" size="small">
Edit
</Button>
<Button variant="secondary" size="small">
Delete
</Button>
<Button variant="secondary" size="small">
Share
</Button>
</div>Button Group
<div className="flex gap-3 flex-wrap">
<Button variant="primary">Primary Action</Button>
<Button variant="secondary">Secondary Action</Button>
<Button variant="outline">Outline Action</Button>
<Button variant="ghost">Ghost Action</Button>
<Button variant="link">Link Action</Button>
</div>