Buttons
Buttons allow users to take actions and make choices with a single tap. They communicate calls to action and allow users to interact with the interface.
Button Variants
Different button styles for different contexts and emphasis levels.
<Button className="rounded-2xl bg-[#4B83FF] hover:bg-[#3A6AD9]">Primary</Button>
<Button variant="secondary" className="rounded-2xl">Secondary</Button>
<Button variant="outline" className="rounded-2xl">Outline</Button>
<Button variant="ghost" className="rounded-2xl">Ghost</Button>
<Button variant="destructive" className="rounded-2xl">Destructive</Button>
<Button variant="link">Link</Button>Button Sizes
Buttons come in different sizes to accommodate various layouts and hierarchies.
<Button size="sm" className="rounded-2xl bg-[#4B83FF]">Small</Button>
<Button className="rounded-2xl bg-[#4B83FF]">Default</Button>
<Button size="lg" className="rounded-2xl bg-[#4B83FF]">Large</Button>Button with Icon
Buttons can include icons to enhance visual communication and provide additional context.
<Button className="rounded-2xl bg-[#4B83FF]">
<ArrowRight className="mr-2 h-4 w-4" /> Next
</Button>
<Button variant="outline" className="rounded-2xl">
<Copy className="mr-2 h-4 w-4" /> Copy
</Button>
<Button variant="ghost" size="icon" className="rounded-2xl">
<ArrowRight className="h-4 w-4" />
</Button>