Components Version badge

Version badge

The version chip for a quote (or any versioned entity): a GitBranch glyph, then either a plain “Version N” label or — when more than one version exists — the version-picker dropdown. Optional child content becomes a trailing action (e.g. a “new revision” button). It exists so the icon ↔ label spacing lives in one place.

<koala-version-badge>

Canonical

Version 1

<koala-version-badge version="1" picker-items="versionItems">
    <a koala-icon-button="Neutral" href="@newRevisionUrl" aria-label="New revision">
        <koala-icon name="Plus" size="Small" />
    </a>
</koala-version-badge>

A single-version quote: the GitBranch glyph, the “Version 1” label, and a trailing “new revision” action pushed to the right.

Variants

Version 1

Single version

version="1"

Version 1

With trailing action

version="1" + child

Multiple versions (picker)

picker-items (count > 1)

Picker + action

picker-items + child

Props

Attribute	Values	Notes
version	int	The current version number, rendered as “Version {n}”.
picker-items	IReadOnlyList<KoalaDropdownItem>?	All selectable versions. When more than one is supplied the label becomes a picker chip (flag the current one `IsActive`); otherwise a plain label is shown.
class	string?	Extra classes on the row (e.g. `mt-3` to space it under the fee headline).
(child content)	markup	Optional trailing action(s) — pushed to the right with `ml-auto`.

Do & don't

Version 1

Do Compose the helper — the icon ↔ label gap is fixed.

Version 1

Don't Don't hand-roll the icon + label row — the spacing drifts.