The humble button is often overlooked, but it's a fundamental building block of any user interface. In Velora UI, our Button component is designed for versatility, accessibility, and ease of use.

Variants and Sizes

Velora UI's Button comes with several variants (e.g., `default`, `secondary`, `outline`, `ghost`, `link`) and sizes (`default`, `sm`, `lg`, `icon`) to fit various design needs.

import { Button } from "@/components/ui/button";

function MyButtons() {
  return (
    <div className="flex gap-2">
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button size="sm">Small Button</Button>
    </div>
  );
}

Accessibility

We ensure our Button component adheres to accessibility best practices, including proper ARIA attributes and keyboard navigation support.

Explore the Button component in our component documentation for more details.