Button

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

pnpm dlx velaui add @velaui/button

npx shadcn@latest add @velaui/button

yarn dlx shadcn@latest add @velaui/button

bunx --bun shadcn@latest add @velaui/button

Types

Primary
Secondary
Outline
Ghost
Destructive
Link

View code

Button · Primary

Installation

pnpm dlx velaui add @velaui/button

npx shadcn@latest add @velaui/button

yarn dlx shadcn@latest add @velaui/button

bunx --bun shadcn@latest add @velaui/button

Code

button-primary.tsx

import { ArrowUpRight } from "@/components/icons/arrow-up-right";
import { Button } from '@/components/ui/button';

export default function Example() {
  return (
    <Button variant="primary">
      <ArrowUpRight data-icon="inline-start" className="size-5" strokeWidth={1.5} />
      Button
      <ArrowUpRight data-icon="inline-end" className="size-5" strokeWidth={1.5} />
    </Button>
  )
}

View code

Button · Secondary

Installation

pnpm dlx velaui add @velaui/button

npx shadcn@latest add @velaui/button

yarn dlx shadcn@latest add @velaui/button

bunx --bun shadcn@latest add @velaui/button

Code

button-secondary.tsx

import { ArrowUpRight } from "@/components/icons/arrow-up-right";
import { Button } from '@/components/ui/button';

export default function Example() {
  return (
    <Button variant="secondary">
      <ArrowUpRight data-icon="inline-start" className="size-5" strokeWidth={1.5} />
      Button
      <ArrowUpRight data-icon="inline-end" className="size-5" strokeWidth={1.5} />
    </Button>
  )
}

View code

Button · Outline

Installation

pnpm dlx velaui add @velaui/button

npx shadcn@latest add @velaui/button

yarn dlx shadcn@latest add @velaui/button

bunx --bun shadcn@latest add @velaui/button

Code

button-outline.tsx

import { ArrowUpRight } from "@/components/icons/arrow-up-right";
import { Button } from '@/components/ui/button';

export default function Example() {
  return (
    <Button variant="outline">
      <ArrowUpRight data-icon="inline-start" className="size-5" strokeWidth={1.5} />
      Button
      <ArrowUpRight data-icon="inline-end" className="size-5" strokeWidth={1.5} />
    </Button>
  )
}

View code

Button · Ghost

Installation

pnpm dlx velaui add @velaui/button

npx shadcn@latest add @velaui/button

yarn dlx shadcn@latest add @velaui/button

bunx --bun shadcn@latest add @velaui/button

Code

button-ghost.tsx

import { ArrowUpRight } from "@/components/icons/arrow-up-right";
import { Button } from '@/components/ui/button';

export default function Example() {
  return (
    <Button variant="ghost">
      <ArrowUpRight data-icon="inline-start" className="size-5" strokeWidth={1.5} />
      Button
      <ArrowUpRight data-icon="inline-end" className="size-5" strokeWidth={1.5} />
    </Button>
  )
}

View code

Button · Destructive

Installation

pnpm dlx velaui add @velaui/button

npx shadcn@latest add @velaui/button

yarn dlx shadcn@latest add @velaui/button

bunx --bun shadcn@latest add @velaui/button

Code

button-destructive.tsx

import { ArrowUpRight } from "@/components/icons/arrow-up-right";
import { Button } from '@/components/ui/button';

export default function Example() {
  return (
    <Button variant="destructive">
      <ArrowUpRight data-icon="inline-start" className="size-5" strokeWidth={1.5} />
      Button
      <ArrowUpRight data-icon="inline-end" className="size-5" strokeWidth={1.5} />
    </Button>
  )
}

View code

Button · Link

Installation

pnpm dlx velaui add @velaui/button

npx shadcn@latest add @velaui/button

yarn dlx shadcn@latest add @velaui/button

bunx --bun shadcn@latest add @velaui/button

Code

button-link.tsx

import { ArrowUpRight } from "@/components/icons/arrow-up-right";
import { Button } from '@/components/ui/button';

export default function Example() {
  return (
    <Button variant="link">
      <ArrowUpRight data-icon="inline-start" className="size-5" strokeWidth={1.5} />
      Button
      <ArrowUpRight data-icon="inline-end" className="size-5" strokeWidth={1.5} />
    </Button>
  )
}

Sizes

States

Usage

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

<Button type="primary">Save changes</Button>
<Button type="outline" size="sm">Cancel</Button>
<Button type="ghost" shape="icon" aria-label="More" />

Props

Prop	Type	Default
`type`	`"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"primary"`
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
`shape`	`"text" \| "icon"`	`"text"`
`leadingIcon`	`ReactNode`	`—`
`trailingIcon`	`ReactNode`	`—`
`disabled`	`boolean`	`false`