+
+)
+Sizes.parameters = {
+ docs: {
+ description: {
+ story: 'Three sizes: `sm` (16px), `md` (24px), `lg` (32px).',
+ },
+ },
+}
+
+export const Emphasis: StoryFn = () => (
+
+
+)
+Emphasis.parameters = {
+ docs: {
+ description: {
+ story:
+ '`low` uses the muted accent background with dark text. `high` uses the emphasis accent background with white text.',
+ },
+ },
+}
+
+export const WithNotification: StoryFn = () => (
+
+
+)
+WithNotification.parameters = {
+ docs: {
+ description: {
+ story:
+ 'The `notification` prop adds a success-tone indicator dot at the bottom-right corner.',
+ },
+ },
+}
+
+export const Photo: StoryFn = () => (
+
+
+)
+Photo.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Pass `src` to show a profile photo instead of initials. The image fills the circle with `object-fit: cover`. Use `name` for the accessible label — it becomes the `alt` text on the image.',
+ },
+ },
+}
+
+export const NameLabelHorizontal: StoryFn
+
+)
+NameLabelWithPhoto.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Pass `src` to show a profile photo in the avatar. Works with both layouts and the notification dot.',
+ },
+ },
+}
+
+export const NameLabelEdgeCases: StoryFn = () => (
+
+
+)
+NameLabelEdgeCases.parameters = {
+ docs: {
+ description: {
+ story:
+ 'The component fills its container. Long names wrap naturally — the row height grows with the content. **Vertical** layout keeps name and metadata on one line and is intended for wider contexts like headers or nav. Initials are always derived from the **first and last word**, regardless of how many names — `"Mary Jane Elizabeth Watson"` → `"MW"`.',
+ },
+ },
+}
+
+export const NameLabelDensity: StoryFn = () => (
+
+
+ {[
+ {
+ name: 'Bartholomew Featherstonehaugh',
+ meta: 'b.featherstonehaugh@equinor.com',
+ },
+ {
+ name: 'Mary Jane Elizabeth Watson',
+ meta: 'mary.watson@equinor.com',
+ },
+ ].map(({ name, meta }) => (
+
+
+ + Horizontal (default) +
+
+
+ {[
+ {
+ name: 'Bartholomew Featherstonehaugh',
+ meta: 'b.featherstonehaugh@equinor.com',
+ },
+ {
+ name: 'Mary Jane Elizabeth Watson',
+ meta: 'mary.watson@equinor.com',
+ },
+ ].map(({ name, meta }) => (
+
+
+ + Vertical — designed for wider contexts (name + metadata on one line) +
+
+
+)
+NameLabelDensity.parameters = {
+ docs: {
+ description: {
+ story:
+ '`AvatarNameLabel` responds to `data-density` on a parent element — spacing between the avatar and name/metadata adapts automatically via spacing tokens.',
+ },
+ },
+}
+
+const sectionLabel = { fontSize: '11px', color: '#6f6f6f', marginBottom: '4px' }
+
+const ListWithDividers = ({
+ children,
+ maxWidth = '320px',
+}: {
+ children: React.ReactNode[]
+ maxWidth?: string
+}) => {
+ const items = React.Children.toArray(children)
+ return (
+
+
+ + Spacious (default) +
+
+
+
+
+ + Comfortable +
+
+
+
+ {items.map((child, i) => (
+
+ )
+}
+
+export const NameLabelWithSlot: StoryFn = () => (
+
+
+ ))}
+ {child}
+ {i < items.length - 1 &&
+
+)
+NameLabelWithSlot.parameters = {
+ docs: {
+ description: {
+ story:
+ 'The `children` prop renders into a trailing slot to the right of the name. It is open — use it for anything contextual to that person, like an action button, a role badge, or a timestamp. The examples here are just starting points.',
+ },
+ },
+}
diff --git a/packages/eds-core-react/src/components/next/Avatar/Avatar.test.tsx b/packages/eds-core-react/src/components/next/Avatar/Avatar.test.tsx
new file mode 100644
index 0000000000..9b5e578710
--- /dev/null
+++ b/packages/eds-core-react/src/components/next/Avatar/Avatar.test.tsx
@@ -0,0 +1,283 @@
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Avatar } from './Avatar'
+import { AvatarNameLabel } from './AvatarNameLabel'
+
+describe('Avatar (next)', () => {
+ describe('Rendering', () => {
+ it('renders with default props', () => {
+ render(
+
+ {[
+ {
+ name: 'Ada Lovelace',
+ meta: 'Senior Engineer',
+ img: 'https://i.pravatar.cc/150?img=47',
+ },
+ {
+ name: 'Mary Jane Watson',
+ meta: 'Reservoir Geoscientist',
+ img: 'https://i.pravatar.cc/150?img=32',
+ },
+ ].map(({ name, meta, img }) => (
+
+
+
+ ))}
+
+
+
+ Overflow menu
+
+
+ {[
+ {
+ name: 'Ada Lovelace',
+ meta: 'ada@equinor.com',
+ role: 'Admin',
+ tone: 'info' as const,
+ img: 'https://i.pravatar.cc/150?img=47',
+ },
+ {
+ name: 'Mary Jane Watson',
+ meta: 'mary@equinor.com',
+ role: 'Viewer',
+ tone: 'neutral' as const,
+ img: 'https://i.pravatar.cc/150?img=32',
+ },
+ ].map(({ name, meta, role, tone, img }) => (
+
+ {role}
+
+ ))}
+
+
+
+ Role badge
+
+
+ {[
+ {
+ name: 'Ada Lovelace',
+ meta: 'Senior Engineer',
+ time: '2h ago',
+ img: 'https://i.pravatar.cc/150?img=47',
+ },
+ {
+ name: 'Mary Jane Watson',
+ meta: 'Reservoir Geoscientist',
+ time: '3d ago',
+ img: 'https://i.pravatar.cc/150?img=32',
+ },
+ ].map(({ name, meta, time, img }) => (
+
+
+ {time}
+
+
+ ))}
+
+
+ Last active
+
+ {src ? (
+ 
+ ) : (
+ resolvedInitial && (
+
+ )
+ )}
+ {notification && (
+
+ )}
+
+ )
+})
+
+Avatar.displayName = 'Avatar'
diff --git a/packages/eds-core-react/src/components/next/Avatar/Avatar.types.ts b/packages/eds-core-react/src/components/next/Avatar/Avatar.types.ts
new file mode 100644
index 0000000000..e698092e07
--- /dev/null
+++ b/packages/eds-core-react/src/components/next/Avatar/Avatar.types.ts
@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react'
+
+export type AvatarSize = 'sm' | 'md' | 'lg'
+export type AvatarEmphasis = 'high' | 'low'
+
+export type AvatarProps = {
+ /** Size of the avatar — sm (16px), md (24px), lg (32px) */
+ size?: AvatarSize
+ /** Colour emphasis — low uses muted background, high uses emphasis background */
+ emphasis?: AvatarEmphasis
+ /**
+ * Initial(s) displayed in the avatar — intended to be 1–2 characters (e.g.
+ * `"A"` or `"AL"`). The span is `aria-hidden`; provide `name` to give
+ * screen readers an accessible label. Longer strings are clipped by the circle.
+ */
+ initial?: string
+ /**
+ * Full name of the person. Sets `role="img"` and `aria-label` on the avatar
+ * so screen readers announce the person's name instead of skipping it.
+ * Required when using Avatar standalone — not needed inside `AvatarNameLabel`
+ * where the adjacent name text provides context.
+ */
+ name?: string
+ /**
+ * Image source URL. When provided, renders a circular photo instead of initials.
+ * Pair with `name` or `alt` for accessibility.
+ */
+ src?: string
+ /** Alt text for the image. Falls back to `name` if not provided. Pass `""` explicitly for decorative images. */
+ alt?: string
+ /** Show a success-tone notification indicator dot. When `name` is set, "notification" is appended to the avatar `aria-label` (e.g. `"Ada Lovelace, notification"`). The dot is `aria-hidden` and silent when no `name` is provided. */
+ notification?: boolean
+} & HTMLAttributes
+
+ )
+ },
+)
+
+AvatarNameLabel.displayName = 'AvatarNameLabel'
diff --git a/packages/eds-core-react/src/components/next/Avatar/AvatarNameLabel.types.ts b/packages/eds-core-react/src/components/next/Avatar/AvatarNameLabel.types.ts
new file mode 100644
index 0000000000..98d5359ea8
--- /dev/null
+++ b/packages/eds-core-react/src/components/next/Avatar/AvatarNameLabel.types.ts
@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import type { AvatarEmphasis, AvatarSize } from './Avatar.types'
+
+export type AvatarNameLabelLayout = 'horizontal' | 'vertical'
+
+export type AvatarNameLabelProps = {
+ /** Name of the person, displayed as the primary label. Also auto-derives the avatar initial. */
+ name: string
+ /** Secondary label — email, job title, or any short metadata string */
+ meta?: string
+ /**
+ * Layout variant for the name/email block.
+ *
+ * - `'horizontal'` — name and email are **stacked** (column). Use in vertical
+ * lists where each row shows one person.
+ * - `'vertical'` — name and email are **inline** (row). Use in horizontal
+ * lists or compact contexts where a single line per person is needed.
+ *
+ * Note: the naming follows the Figma component naming convention and refers
+ * to the orientation of the containing list, not the internal text direction.
+ */
+ layout?: AvatarNameLabelLayout
+ /** Override the initial shown in the avatar (defaults to first letter of name) */
+ initial?: string
+ /** Profile photo URL. When provided, renders a circular photo instead of initials. */
+ src?: string
+ /** Alt text for the photo. Defaults to `""` (decorative) so the visible name is not announced twice. Pass a value to override. */
+ alt?: string
+ /** Size of the avatar */
+ size?: AvatarSize
+ /** Colour emphasis of the avatar */
+ emphasis?: AvatarEmphasis
+ /** Show a notification dot on the avatar */
+ notification?: boolean
+ /** Optional slot for content to the right (e.g. an icon or action button) */
+ children?: ReactNode
+} & Omit
+
+ {children &&
+ {name}
+ {meta && {meta}}
+ {notification && (
+ Notification
+ )}
+
+ {children}
}
+