Button
Bouton React accessible avec variantes, tailles et support clavier complet — installez-le depuis le registre VLLNT UI avec la CLI shadcn.
Le Button est le controle interactif principal de VLLNT UI — un composant React accessible et navigable au clavier, avec des variantes (primaire, secondaire, outline, ghost, destructive, lien) et des tailles. Il est publie comme entree de registre lisible par machine : vous installez la source directement dans votre application et vous la possedez.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Button a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/button.jsonSource
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
defaultVariants: {
size: "default",
variant: "default",
},
variants: {
size: {
default: "h-10 px-4 py-2",
icon: "size-10",
lg: "h-11 rounded-md px-8",
sm: "h-9 rounded-md px-3",
},
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
},
},
},
);
export type ButtonProps = {
asChild?: boolean;
} & React.ButtonHTMLAttributes<HTMLButtonElement> &
VariantProps<typeof buttonVariants>;
const Button = ({
asChild = false,
className,
ref: reference,
size,
variant,
...props
}: ButtonProps & { ref?: React.Ref<HTMLButtonElement> }) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ className, size, variant }))}
ref={reference}
{...props}
/>
);
};
Button.displayName = "Button";
export { Button, buttonVariants };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation React Native
Installez le renderer React Native experimental depuis le canal canary. Le paquet web stable et son API restent inchanges.
pnpm add @vllnt/ui-native@canary