Button

Displays a button or a component that looks like a button.

Preview

Installation

npx drivn add button

Usage

1 import { Button } from "@/components/ui/button"
2 
3 export default function Page() {
4   return (
5     <Button variant="default">
6       Click me
7     </Button>
8   )
9 }

Drivn Feature

Slots

Use leftIcon and rightIcon props for clean icon placement.

Left Icon`leftIcon`

Place an icon before the button text for actions like "Add", "Back", etc.

Right Icon`rightIcon`

Place an icon after the button text for actions like "Next", "External link", etc.

Loading State

Show a loading indicator and disable interaction with the loading prop.

Loading`loading`

Shows a spinner and disables interaction when loading is true.

Disabled State

Reduce opacity and prevent interaction with the disabled prop.

Disabled`disabled`

Reduces opacity and prevents all interaction when disabled is true.

API Reference

Prop	Type	Default	Description
`variant`	"default" \| "secondary" \| "outline" \| "destructive"	"default"	Visual style of the button
`size`	"sm" \| "md" \| "lg"	"md"	Size of the button
`rounded`	"md" \| "full"	"full"	Border radius of the button
`loading`	boolean	false	Shows spinner and disables interaction
`disabled`	boolean	false	Disables the button
`leftIcon`	ComponentType \| ReactElement	—	Icon component (Plus) or element (<Plus className="..." />)
`rightIcon`	ComponentType \| ReactElement	—	Icon component (Plus) or element (<Plus className="..." />)

1	import { Button } from "@/components/ui/button"
2
3	export default function Page() {
4	return (
5	<Button variant="default">
6	Click me
7	</Button>
8	)
9	}