Button Component
Displays a button or a component that looks like a button.
Variants
All six button variants matching shadcn/ui design system.
Sizes
Six size options including icon-only variants.
Buttons with Icons
Buttons with icons at start or end position (RTL-aware).
Icon at Start
Icon at End
RTL (Right-to-Left) Support
Icon positioning automatically flips in RTL layouts.
Note: In RTL mode, "Start" icons appear on the right, "End" icons on the left.
Disabled State
Buttons with reduced opacity and no pointer events.
Interactive
Click handlers and event callbacks.
Button Types
Different HTML button type attributes (submit, reset, button).
LinkButton (Semantic Links)
Use LinkButton for navigation - renders as <a> tag styled as a button for better semantics and SEO.
All Variants
With Icons
Button vs LinkButton
Choose the right component for better semantics and accessibility.
✓ Use Button
- Form submissions
- Opening modals/dialogs
- Triggering state changes
- Any action that doesn't navigate
✓ Use LinkButton
- Navigation to pages
- External links
- SEO-important links
- Any action that changes URL
Custom Classes
Buttons with additional CSS classes via Class parameter.
Dark Mode
Toggle dark mode above to test all variants in dark theme.
Accessibility
Keyboard navigation and screen reader support.
✓ Tab key focuses buttons in sequence
✓ Enter and Space keys activate focused buttons
✓ Disabled buttons are not focusable (tabindex="-1")
✓ ARIA attributes set correctly (aria-label, aria-disabled)
✓ Focus ring appears on keyboard focus (focus-visible:ring-2)
✓ Color contrast meets WCAG 2.1 AA standards
✓ Semantic HTML button element with proper role
✓ Screen readers announce button text and state correctly
Browser Compatibility
Tested and verified across modern browsers.
✓ Chrome 120+ (tested)
✓ Firefox 120+ (tested)
✓ Edge 120+ (tested)
✓ Safari 17+ (compatible)