AvatarButton

A button that contains the user’s Avatar.

Basic Usage

<>
  <div>
    <AvatarButton size="lg" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
  <div>
    <AvatarButton size="md" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
  <div>
    <AvatarButton size="sm" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
</>

<>
  <div>
    <AvatarButton size="lg" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
  <div>
    <AvatarButton size="md" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
  <div>
    <AvatarButton size="sm" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
</>

<Dropdown>
  <Dropdown.Toggle as={AvatarButton} src="https://source.unsplash.com/128x128/?dog,portrait">
    Casey
  </Dropdown.Toggle>

  <Dropdown.Menu alignRight>
    <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Account</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

<Dropdown>
  <Dropdown.Toggle as={AvatarButton} src="https://source.unsplash.com/128x128/?dog,portrait">
    Casey
  </Dropdown.Toggle>

  <Dropdown.Menu alignRight>
    <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Account</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Props set on Dropdown.Toggle get passed through to the "as" component

<Dropdown>
  <Dropdown.Toggle as={AvatarButton} size="sm" src="https://source.unsplash.com/128x128/?dog,portrait">
    Casey
  </Dropdown.Toggle>

  <Dropdown.Menu alignRight>
    <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Account</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

<Dropdown>
  <Dropdown.Toggle as={AvatarButton} size="sm" src="https://source.unsplash.com/128x128/?dog,portrait">
    Casey
  </Dropdown.Toggle>

  <Dropdown.Menu alignRight>
    <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Account</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

No label

For use in mobile viewports or constrained views.

<>
  <div>
    <AvatarButton showLabel={false} size="lg" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
  <div>
    <AvatarButton showLabel={false} size="md" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
  <div>
    <AvatarButton showLabel={false} size="sm" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>

  <Dropdown>
    <Dropdown.Toggle  showLabel={false} as={AvatarButton} src="https://source.unsplash.com/128x128/?dog,portrait">
      Casey
    </Dropdown.Toggle>

    <Dropdown.Menu alignRight>
      <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>
      <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>
      <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>
      <Dropdown.Item href="#/action-3">Account</Dropdown.Item>
      <Dropdown.Divider />
      <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
</>

<>
  <div>
    <AvatarButton showLabel={false} size="lg" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
  <div>
    <AvatarButton showLabel={false} size="md" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>
  <div>
    <AvatarButton showLabel={false} size="sm" src="https://source.unsplash.com/128x128/?dog,portrait">Casey</AvatarButton>
  </div>

  <Dropdown>
    <Dropdown.Toggle  showLabel={false} as={AvatarButton} src="https://source.unsplash.com/128x128/?dog,portrait">
      Casey
    </Dropdown.Toggle>

    <Dropdown.Menu alignRight>
      <Dropdown.Item href="#/action-1">Resume your last course</Dropdown.Item>
      <Dropdown.Item href="#/action-2">Dashboard</Dropdown.Item>
      <Dropdown.Item href="#/action-3">Profile</Dropdown.Item>
      <Dropdown.Item href="#/action-3">Account</Dropdown.Item>
      <Dropdown.Divider />
      <Dropdown.Item href="#/action-3">Sign out</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
</>

CSS overrides can be applied to this component through the .btn-avatar class name.

Theme Variables (SCSS)#

$avatar-button-padding-left: .25em !default;
$avatar-button-padding-left-sm: .25em !default;
$avatar-button-padding-left-lg: .25em !default;

AvatarButton Props API

children string
The button text
className string
A class name to append to the button
showLabel bool
Show the label or only the avatar
Defaulttrue
size enum'sm' | 'md' | 'lg'
The button size
Default'md'
src string
Image src of the avatar image
variant string
The button style variant to use
Default'tertiary'

Paragon Design System

AvatarButton

Basic Usage

No label

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

AvatarButton

Basic Usage#

With Dropdown#

No label#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage

With Dropdown

No label