Avatars
Where to Use Liquid Metal Profile Button in React Apps
Liquid Metal Profile Button is a profile chip with liquid metal frame and avatar; preview mode skips navigation. Account entry points ship it when the profile control should match the metal avatar language.
Where teams use Liquid Metal Profile Button
Use case 1
Header profile chip
Clicking opens the account menu or profile route. Metal frame ties the chip to Liquid Metal Avatar elsewhere.
Use case 2
Mobile drawer identity
Side drawers lead with the profile button before nav links. Preview mode helps Storybook and docs avoid accidental navigation.
Use case 3
Comment composer identity
Show who is posting beside the composer with the same chip. Reinforces account context in multi-user browsers.
Use case 4
Settings shortcut
Deep-link the chip to /settings/profile. Consistent framing reduces hunt time for account controls.
Who it is for
App-shell engineers wiring branded profile entry chips into headers and drawers.
Try Liquid Metal Profile Button on AkmanOS
Inspect the metal frame in the live preview, then bring the markdown into your AI coding tool to connect Liquid Metal Profile Button to your account routes.
Preview /preview/liquid-metal-profile-buttonMore in Avatars
- Liquid Metal AvatarPaper LiquidMetal ring avatar with sizes, image, and fallback. Explore real product surfaces for the Liquid Metal Avatar component — then open the live AkmanOS preview and copy production-ready source.
- Profile DropdownAccount menu with liquid metal avatar, workspace actions, and sign out. Explore real product surfaces for the Profile Dropdown component — then open the live AkmanOS preview and copy production-ready source.
- Switch WorkspaceWorkspace switcher with avatar, title, animated dropdown, and add space. Explore real product surfaces for the Switch Workspace component — then open the live AkmanOS preview and copy production-ready source.