Avatar Label

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as AvatarLabelStories from './AvatarLabel.stories';

<Meta of={AvatarLabelStories} name='Usage' />

<Title />

## Purpose

Pairs the Agent Avatar with a text label, so an agent is shown with its name.

## Usage

Use `AvatarLabel` anywhere a name needs a small visual anchor: "triggered by" on a build or deployment, "created by" in a list, a table cell showing who owns a row.

Add `attribution` when the agent is acting for a person, for example "Zappy on behalf of alex@example.com". Pass the whole phrase as one translated string; it renders after the name in the secondary text color and truncates before the name does.

Set `hasAvatar` to `false` to show only the name (and attribution), for example when the avatar is already shown on a neighboring item. The avatar's `label` stays as screen-reader-only text.

## Implementation

See the table below for the available props. The other stories show every variant and state.

<hr />

<Canvas of={AvatarLabelStories.Default} />
<Controls of={AvatarLabelStories.Default} />