Floating Action Button
Bouton d'action a position fixe pour actions principales. Installez Floating Action Button depuis le registre VLLNT UI avec la CLI shadcn.
Bouton d'action a position fixe pour actions principales. Fait partie de la famille utility 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 Floating Action 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.ai/r/floating-action-button.jsonSource
"use client";
import { memo } from "react";
import type { ReactNode } from "react";
import { cn } from "../../lib/utils";
export type FloatingActionButtonProps = {
"aria-label": string;
children: ReactNode;
className?: string;
onClick: () => void;
position?: "bottom-left" | "bottom-right";
};
function FloatingActionButtonImpl({
"aria-label": ariaLabel,
children,
className,
onClick,
position = "bottom-right",
}: FloatingActionButtonProps): React.ReactNode {
return (
<button
aria-label={ariaLabel}
className={cn(
"fixed z-40 flex size-12 items-center justify-center rounded-full",
"bg-primary text-primary-foreground shadow-lg",
"transition-transform hover:scale-110",
"focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
position === "bottom-right" && "bottom-20 right-4 sm:bottom-4",
position === "bottom-left" && "bottom-20 left-4 sm:bottom-4",
className,
)}
onClick={onClick}
type="button"
>
{children}
</button>
);
}
export const FloatingActionButton = memo(FloatingActionButtonImpl);
FloatingActionButton.displayName = "FloatingActionButton";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.