aura
Home Aura
aura

Profile

The Profile component is a button component that displays an image, avatar, initials, and name. It is generally used to display user information in a compact form.

Attributes

  • image - Image URL.
  • avatar - (bool) Show avatar.
  • initials - (optional) Initials to display. If not provided, the first two characters of the name will be used.
  • name - Name to display.
  • email - Email to display.
  • basic - (bool) Basic profile button.

Basic Usage

Copy to clipboard

<aura:profile
    name="John Doe"
    email="[email protected]"
/>
<aura:profile
    name="John Doe"
/>
<aura:profile
    email="[email protected]"
/>

With Avatar

Copy to clipboard

<aura:profile
    name="Jane Doe"
    email="[email protected]"
    avatar
/>

With Default Image

Copy to clipboard

<aura:profile
    name="Jessica Doe"
    email="[email protected]"
    :image="true"
/>

With Custom Image

Copy to clipboard

<aura:profile
    name="Jessica Doe"
    email="[email protected]"
    image="https://randomuser.me/api/portraits/men/72.jpg"
/>

Custom Initials

Copy to clipboard

<aura:profile
    name="Eva Doe"
    email="[email protected]"
    initials="AB"
/>

With Dropdown

Copy to clipboard

<aura:dropdown>
    <aura:profile
        name="Emma Doe"
        email="[email protected]"
        avatar
    />
    <aura:dropdown.content>
        <aura:dropdown.button text="Profile" icon="user" />
        <aura:dropdown.button text="Settings" icon="cog-6-tooth" />
        <aura:dropdown.button text="Logout" icon="arrow-right-start-on-rectangle" />
    </aura:dropdown.content>
</aura:dropdown>

Basic

Copy to clipboard

<aura:dropdown>
    <aura:profile
        name="Emma Doe"
        email="[email protected]"
        avatar
        basic
    />
    <aura:dropdown.content>
        <aura:dropdown.button text="Profile" icon="user" />
        <aura:dropdown.button text="Settings" icon="cog-6-tooth" />
        <aura:dropdown.button text="Logout" icon="arrow-right-start-on-rectangle" />
    </aura:dropdown.content>
</aura:dropdown>