Components / Actions

Button

Triggers an action or event.

Preview

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

secondary

The secondary style of this component.

1import { Button } from "@/components/ui/button"2
3export function ButtonDemo() {4  return (5    <Button variant="secondary">6      Save changes7    </Button>8  )9}

outline

The outline style of this component.

1import { Button } from "@/components/ui/button"2
3export function ButtonDemo() {4  return (5    <Button variant="outline">6      Save changes7    </Button>8  )9}

ghost

The ghost style of this component.

1import { Button } from "@/components/ui/button"2
3export function ButtonDemo() {4  return (5    <Button variant="ghost">6      Save changes7    </Button>8  )9}

destructive

The destructive style of this component.

1import { Button } from "@/components/ui/button"2
3export function ButtonDemo() {4  return (5    <Button variant="destructive">6      Save changes7    </Button>8  )9}

Installation

Add the source directly to your project with the shadcn CLI.

npx shadcn@latest add qentrah/DUI/button

Usage

Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.