Reddot UI Library

Docs
Button

Button

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

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/button.json

Utilisation

import { Button } from "@/components/ui/button"
 
export function ButtonDemo() {
  return <Button>Button</Button>
}

Variantes

import { Button } from "@/components/ui/button"
 
export function ButtonVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

Avec icône

import { Button } from "@/components/ui/button"
import { ChevronRight, Mail } from "lucide-react"
 
export function ButtonIcon() {
  return (
    <div className="flex gap-2">
      <Button>
        <Mail className="mr-2 h-4 w-4" />
        Login with Email
      </Button>
      <Button variant="outline" size="icon">
        <ChevronRight className="h-4 w-4" />
      </Button>
    </div>
  )
}

Comme lien

import { Button } from "@/components/ui/button"
import Link from "next/link"
 
export function ButtonAsChild() {
  return (
    <Button asChild>
      <Link href="/login">Login</Link>
    </Button>
  )
}

API Reference

Button

PropTypeDefaultDescription
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""default"The variant of the button
size"default" | "sm" | "lg" | "icon""default"The size of the button
asChildbooleanfalseChange the component to the HTML tag or custom component of the next child.

Dépendances

Ce composant nécessite les dépendances suivantes :

  • @radix-ui/react-slot

Notes

  • Ce composant UI fait partie du système de design
  • Respecte les conventions de style et d'accessibilité
  • Supporte plusieurs variantes et tailles
  • Peut être utilisé avec asChild pour transformer d'autres composants