Author

Compact byline that attributes content to any author: name, avatar (URL or path), optional profile link, and a localized or custom byline prefix; the fuller biography treatment is AuthorBio.

Status: stable. Group: structure. Markdown version: /design-system/components/author.md

When to use

Compact byline attribution (author identity) for blog posts. For the fuller end-of-article treatment use AuthorBio.

When not to use

Do not use Author for a full biography or social-link block; use AuthorBio instead.
Do not render an unlabelled avatar when the author's identity is not also available as text.

Look-alikes

AuthorBio: Do not use Author for a full biography or social-link block; use AuthorBio instead.

Props

Author props
Prop	Type	Default	Description	Required
`name`	`string`	none	Author name shown after the byline prefix; also names the avatar and feeds its initials fallback.	Yes
`imageUrl`	`string \| { default: string } \| StaticImageData`	none	Avatar image source: a URL, an imported asset path, or static image data. When absent the avatar falls back to initials from `name`.	No
`size`	`AvatarSize`	`md`	Avatar size, exposed from the Avatar atom: token sizes `sm`/`md`/`lg`/`xl` are canonical; any CSS length string is passed through. Defaults to `md`.	No
`profileUrl`	`string`	none	Optional author profile URL; makes the byline text a link.	No
`bylinePrefix`	`string`	none	Byline prefix before the name. Defaults to the localized "By" (fi "Kirjoittanut", sv "Av"), matching the native dt-author element.	No

Variants

Available sizes: sm, md, lg, xl (default md).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

Author rules
Level	Rule	How it is checked
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
SHOULD	Place Author beside publication metadata near the article title.	Not stated in the contract.
SHOULD NOT	Do not repeat a biography in the compact byline; compose AuthorBio later in the article.	Not stated in the contract.

Install and import

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { Author } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/identity exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.
Also available as the custom element <dt-author>; see the custom elements manifest.