Profile

Profile button with avatar and optional name. Wraps the avatar component and is commonly used as a dropdown trigger.

Basic usage

<x-boson::profile avatar="/user.png" name="Jane Doe" />

Without name

<x-boson::profile avatar="/user.png" />

Without chevron

<x-boson::profile avatar="/user.png" name="Jane Doe" :chevron="false" />

Shapes

<x-boson::profile avatar="/user.png" name="Rounded" shape="rounded" />
<x-boson::profile avatar="/user.png" name="Circle" shape="circle" />

Sizes

<x-boson::profile avatar="/user.png" name="XS" size="xs" />
<x-boson::profile avatar="/user.png" name="SM" size="sm" />
<x-boson::profile avatar="/user.png" name="MD" size="md" />
<x-boson::profile avatar="/user.png" name="LG" size="lg" />
<x-boson::profile avatar="/user.png" name="XL" size="xl" />

Forwarding avatar attributes

<x-boson::profile avatar="/user.png" name="Jane Doe" size="lg" avatar:color="auto" />

As dropdown trigger

<x-boson::dropdown>
    <x-boson::profile avatar="/user.png" name="Jane Doe" />
    <x-boson::dropdown.menu>
        <x-boson::dropdown.item>Settings</x-boson::dropdown.item>
        <x-boson::dropdown.item>Profile</x-boson::dropdown.item>
        <x-boson::dropdown.separator />
        <x-boson::dropdown.item>Logout</x-boson::dropdown.item>
    </x-boson::dropdown.menu>
</x-boson::dropdown>

Custom trailing icon

<x-boson::profile avatar="/user.png" name="Jane Doe" icon:trailing="cog-6-tooth" />

Props

Prop	Type	Default	Description
`avatar`	`string`	`null`	Image URL passed to the inner avatar component
`name`	`string`	`null`	Display name shown next to the avatar
`size`	`string`	`sm`	Size of the profile button (xs, sm, md, lg, xl)
`shape`	`string`	`rounded`	Shape of the avatar (rounded, circle)
`chevron`	`bool`	`true`	Show a trailing chevron indicator
`icon:trailing`	`string`	`chevron-down`	Heroicon name for the trailing icon
`avatar:*`	`mixed`	`-`	Attributes forwarded to the inner avatar component (e.g. avatar:color)