Components
Loading preview...
The Avatar Action Button is a shadcn/ui-based component designed for login or social authentication flows, such as “Continue as John.” It features a circular avatar on the left and a label on the right, providing a clear and visually appealing user identity cue. The component automatically adjusts the avatar size, button height, and text size based on the chosen variant (sm, md, lg), ensuring a balanced and responsive design. By using a fixed avatar image or a custom source, it remains consistent and professional, making it ideal for authentication buttons, profile actions, or any scenario where user identity should be highlighted in a compact, interactive UI element.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/avatar-action-buttonimport AvatarActionButton from "@/components/ui/avatar-action-button"
export default function DemoAvatarActionButton() {
return (
<div className="flex gap-4">
<AvatarActionButton label="Continue as John" size="sm" />
<AvatarActionButton label="Continue as Jane" size="md" />
<AvatarActionButton label="Continue as Guest" size="lg" />
</div>
);
}