ComponentsCore
Button
A button lets users perform an action or trigger an event using mouse, touch, or keyboard input. It's a key interactive element in most user interfaces.
Example
Usage
Features
- Styleable – Hover, press, and keyboard focus states are provided for easy styling. These states only apply when interacting with an appropriate input device, unlike CSS pseudo classes.
- Accessible – Uses a native
<button>element under the hood, with support for the Space and Enter keys. - Cross-browser – Mouse, touch, keyboard, and focus interactions are normalized to ensure consistency across browsers and devices.
Installation
Required Component
This component depends on Loader. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add buttonAnatomy
import { Button } from "@/components/ui/core/button";<Button tone="default">Default</Button>
<Button tone="secondary">Secondary</Button>
<Button tone="outline">Outline</Button>
<Button tone="ghost">Ghost</Button>
<Button tone="link">Link</Button>
<Button tone="destructive">Destructive</Button>Props
Loading types…