Avatar

Updated:

Use for displaying photos, initials, or icons for people, businesses, or accounts.

Properties

Learn more about properties.

icon

A q2-icon to display as the fallback.

initials

A set of up to four initials to display as capitalized text. Takes priority over name.

name

The name associated with the avatar. The initials of the first and last words provided will display as capital letters.

We recommend always providing a name when you want the avatar to be presented to screen readers.

size

Determines how large to make the avatar

src

Displays the image provided by the user.

Slots

The q2-avatar element has one slot that can be used to insert custom content into the component.

Learn more about slots

An optional affordance indicator to display in the top-right corner

Patterns

Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.

Inline patterns

  • Coin Buttons

    How to build a row of coin-style buttons that group related top-level actions like account shortcuts.

    Coin buttons are circular icon-and-label buttons used for prominent shortcuts, typically along the top of a page or section. Use them to surface a small, fixed set of related actions (for example: Statements, Transfers, Settings, Sign Out).

    Limit coin buttons to 3 to 5 actions per group, and give each button a distinct icon that clearly represents its action. Avoid using the same icon for multiple buttons in a single group; the visual differentiation is what makes coin buttons scannable.

    A coin button takes a q2-avatar element as its child and uses intent="coin". Wrap the set in a q2-action-group so they pick up consistent spacing, alignment, and responsive behavior.

     
    <q2-action-group>
    <q2-btn intent="coin" label="Statements">
        <q2-avatar icon="statements"></q2-avatar>
    </q2-btn>
    <q2-btn intent="coin" label="Transfers">
        <q2-avatar icon="transfer"></q2-avatar>
    </q2-btn>
    <q2-btn intent="coin" label="Settings">
        <q2-avatar icon="gear"></q2-avatar>
    </q2-btn>
    <q2-btn intent="coin" label="Sign Out">
        <q2-avatar icon="logout"></q2-avatar>
    </q2-btn>
</q2-action-group>

Full-page patterns

  • Account List Page

    How to build an Account List page in Tecton: a summary header and a searchable, client-filtered account list.

  • Account Details Page

    How to build an Account Details page in Tecton: a sortable, filterable transaction list with client-side search, column sorting, and pagination.

  • Account Settings Page

    How to build an Account Settings page in Tecton: six independent settings sections covering nickname, notifications, statement delivery, card management, spending limits, and overdraft protection.

  • Funds Transfer Page

    How to build a Funds Transfer form in Tecton: a single-column transfer with rich account options, a recurrence schedule, and client-side validation.

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-avatar component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!

Dependencies

This component uses other components in the Tecton library, including:

  • q2-icon

Dependents

Other components in the Tecton library use this component, including:

  • q2-card

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (17)