Button Group
Groupe de boutons visuellement connectes qui partagent des bordures. Installez Button Group depuis le registre VLLNT UI avec la CLI shadcn.
Groupe de boutons visuellement connectes qui partagent des bordures. Fait partie de la famille form dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Button Group 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.ai/r/button-group.jsonSource
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const buttonGroupVariants = cva(
"isolate inline-flex w-fit [&>*:focus-visible]:z-10 [&>*:focus-within]:z-10",
{
defaultVariants: {
orientation: "horizontal",
},
variants: {
orientation: {
horizontal:
"flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
vertical:
"flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none",
},
},
},
);
/**
* Visually connected group of buttons that share borders.
*
* @example
* <ButtonGroup>
* <Button variant="outline">Prev</Button>
* <Button variant="outline">Next</Button>
* </ButtonGroup>
*/
export type ButtonGroupProps = React.ComponentPropsWithoutRef<"div"> &
VariantProps<typeof buttonGroupVariants>;
const ButtonGroup = ({
className,
orientation,
ref,
...props
}: ButtonGroupProps & { ref?: React.Ref<HTMLDivElement> }) => (
<div
className={cn(buttonGroupVariants({ orientation }), className)}
data-slot="button-group"
ref={ref}
role="group"
{...props}
/>
);
ButtonGroup.displayName = "ButtonGroup";
export { ButtonGroup, buttonGroupVariants };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.