Avatar Button

<sl-avatar-button> | SlAvatarButton
Since 1.1.14 experimental

The avatar button component combines an avatar with a dropdown menu, typically used for user profile actions. 

<sl-avatar-button></sl-avatar-button>

Examples

Initials

Use the name attribute to show user initials.

<sl-avatar-button name="Firstname LastName" size="large"></sl-avatar-button>

Image

Use the image attribute to show a profile picture.

<sl-avatar-button name="Firstname LastName" image="https://randomuser.me/api/portraits/men/75.jpg" size="large"></sl-avatar-button>

Size

Avatar-button supports three sizes: small, medium, and large.

<div style="display: flex; gap: 1rem; align-items: center;">
  <sl-avatar-button name="Small" size="small"></sl-avatar-button>
  <sl-avatar-button name="Medium" size="medium"></sl-avatar-button>
  <sl-avatar-button name="Large" size="large"></sl-avatar-button>
</div>

Color

You can customize the avatar background and text color using CSS variables.

<div style="display: flex; gap: 1rem; align-items: center;">
  <sl-avatar-button
    name="Pink"
    size="large"
    style="--avatar-bg-color: pink; --avatar-text-color: white;"
  ></sl-avatar-button>
  <sl-avatar-button
    name="Green"
    size="large"
    style="--avatar-bg-color: #4caf50; --avatar-text-color: #fff;"
  ></sl-avatar-button>
  <sl-avatar-button
    name="Custom"
    size="large"
    style="--avatar-bg-color: linear-gradient(135deg, #f6d365 0%, #fda085 100%); --avatar-text-color: #222;"
  ></sl-avatar-button>
</div>

Type

Avatar-button supports two types for theme: onLight and onDark.

<div style="display: flex; gap: 1rem; align-items: center; background: #CDD0D5;">
  <sl-avatar-button name="Light" type="onLight" size="large"></sl-avatar-button>
  <sl-avatar-button name="Dark" type="onDark" size="large"></sl-avatar-button>
</div>

Placement

The dropdown menu’s position is controlled by the placement attribute. Use placement="bottom-start" to align the dropdown to the left of the avatar button, or placement="bottom-end" to align it to the right. The dropdown always appears below the avatar button.

Left aligned dropdown Logout Right aligned dropdown Logout 
<div style="display: flex; justify-content: space-between; padding: 2rem;">
  <sl-avatar-button name="Left" size="large" placement="bottom-start" image="https://randomuser.me/api/portraits/men/75.jpg">
    <sl-menu>
      <sl-menu-item>Left aligned dropdown</sl-menu-item>
      <sl-menu-item value="logout">Logout</sl-menu-item>
    </sl-menu>
  </sl-avatar-button>
  <sl-avatar-button name="Right" size="large" placement="bottom-end" image="https://randomuser.me/api/portraits/men/76.jpg">
    <sl-menu>
      <sl-menu-item>Right aligned dropdown</sl-menu-item>
      <sl-menu-item value="logout">Logout</sl-menu-item>
    </sl-menu>
  </sl-avatar-button>
</div>

Custom slot

You can customize the dropdown user info by providing content in the slot.

Firstname LastName
Firstname LastName daniel@example.com
Profile Settings Notifications Logout 
<sl-avatar-button image="https://randomuser.me/api/portraits/men/75.jpg" size="large">
<sl-menu >
  <sl-menu-item >
    <div style="display: flex; align-items: center; ">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-right: 1rem; border: 2px solid #eee;" alt="Firstname LastName" />
      <div style="display: flex; flex-direction: column;">
        <span style="font-weight: 600;">Firstname LastName</span>
        <span style="color: #888; font-size: 0.95em;">daniel@example.com</span>
      </div>
    </div>
  </sl-menu-item>
  <sl-menu-item value="profile">Profile</sl-menu-item>
  <sl-menu-item value="settings">Settings</sl-menu-item>
  <sl-menu-item value="notifications">Notifications</sl-menu-item>
  <sl-menu-item value="logout">Logout</sl-menu-item>
</sl-menu>
</sl-avatar-button>

Slots

Name Description
(default) The default slot for menu items or additional content in the dropdown.

Learn more about using slots.

Properties

Name Description Reflects Type Default
image The user’s profile image URL. string ''
name The user’s display name, used for initials if no image. string ''
placement Dropdown placement: ‘top’, ‘top-start’, ‘top-end’, ‘bottom’, ‘bottom-start’, ‘bottom-end’, ‘right’, ‘right-start’, ‘right-end’, ‘left’, ‘left-start’, ‘left-end’ 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' 'bottom-start'
size Avatar/button size: small, medium, large. 'small' | 'medium' | 'large' 'medium'
type Button type for theme: onLight or onDark. 'onLight' | 'onDark' 'onLight'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-avatar-button-toggle Emitted when the dropdown is toggled, with a detail object containing the new open state. CustomEvent

Learn more about events.

Custom Properties

Name Description Default
--placement The placement of the dropdown (e.g. ‘top’, ‘top-start’, ‘top-end’, ‘bottom’, ‘bottom-start’, ‘bottom-end’, ‘right’, ‘right-start’, ‘right-end’, ‘left’, ‘left-start’, ‘left-end’).
--size The size of the avatar button (small, medium, large).
--type The theme type of the avatar button (onLight or onDark).

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
trigger The button that triggers the dropdown, containing the avatar.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-dropdown>
  • <sl-icon>
  • <sl-popup>