Flux components
Profile
The signed-in user, as a button that opens a menu.
<flux:profile avatar="https://picsum.photos/seed/user/64/64" name="Sara Rezaei" />With a dropdown
<flux:dropdown position="bottom" align="end">
<flux:profile avatar="https://picsum.photos/seed/user/64/64" name="Sara Rezaei" />
<flux:menu>
<flux:menu.item icon="user">My profile</flux:menu.item>
<flux:menu.item icon="shopping-bag">My orders</flux:menu.item>
<flux:menu.separator />
<flux:menu.item icon="arrow-right-start-on-rectangle" variant="danger">Sign out</flux:menu.item>
</flux:menu>
</flux:dropdown>Initials and no chevron
<flux:profile initials="SR" circle :chevron="false" name="Sara Rezaei" />Reference
flux:profile
| Prop | Description |
|---|---|
| avatar | Avatar image URL. |
| initials | Letters shown when there is no avatar. |
| name | Name beside the avatar. Omit for avatar-only. |
| circle | Fully rounded avatar. |
| chevron | Shows the dropdown chevron. Default: true. |
| icon:trailing | Trailing icon in place of the chevron. |