# Avatar Action Button

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/avatar-action-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/avatar-action-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt