Button

A versatile button component with multiple variants and sizes.

button-demo.tsx

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

export default function ButtonDemo() {
  return <Button>Button</Button>;
}

button-with-arrow.tsx

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

export default function ButtonWithArrow() {
  return <Button showArrow>With Arrow</Button>;
}

Installation

npx shadcn@latest add https://roiui.com/r/button.json

Anatomy

anatomy

import { Button } from '../ui/button'

<Button>Button text</Button>

Examples

Secondary

button-secondary.tsx

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

export default function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>;
}

Destructive

button-destructive.tsx

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

export default function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>;
}

Outline

button-outline.tsx

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

export default function ButtonOutline() {
  return <Button variant="outline">Outline</Button>;
}

Ghost

button-ghost.tsx

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

export default function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>;
}

Disabled

button-disabled.tsx

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

export default function ButtonDisabled() {
  return <Button disabled>Disabled</Button>;
}

Loading

"use client";

import { Button } from "@/components/ui/button/button";
import styles from "./button-loading.module.css";

export default function ButtonLoading() {
  return (
    <div className={styles.container}>
      <Button loading={true}>Always Loading</Button>
    </div>
  );
}

Props

Prop	Type	Default
`variant`	`"primary" \| "secondary" \| "destructive" \| "ghost" \| "icon" \| "outline" \| "link"`	`"primary"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`showArrow`	`boolean`	`false`
`pointLeft`	`boolean`	`false`
`loading`	`boolean`	`false`
`className`	`string`	-
`children`	`React.ReactNode`	-
`disabled`	`boolean`	`false`
`onClick`	`() => void`	-
`type`	`"button" \| "submit" \| "reset"`	`"button"`