Version
Synonyms: Version number, release label
Description: The Version component displays a version number or release label as a compact inline element. It is well suited for showing version information next to pages, components, or features and automatically prefixes the value with v.
Example
Rendering the component with a simple version number:
<KolVersion _label="1.2.3" />Accessibility
The Version component is a semantic inline element and is exposed as such to assistive technology:
- Label output: The text defined via
_labelis read by screen readers and communicates the version value. - Inline positioning: The component flows within surrounding text and does not introduce interactive behavior.
- Clear prefixing: The automatically added
vprefix makes the content recognizable as a version string.
Links and references
Usage
Best practices
- Use meaningful version strings: Prefer standardized version identifiers such as semantic versions like
1.2.3. - Place versions contextually: Show the version where users need to understand the current state quickly, for example in a header or status area.
- Avoid redundancy: Do not repeat the same version string unnecessarily in the same context.
- Preserve readability: The component is inline by default and should be used where it integrates cleanly into the text flow.
Use cases
- Displaying the current software version in a header or footer
- Marking document revisions or release states
- Comparing multiple versions side by side
- Indicating release channels such as
1.0.0-betaor2.1.0-staging
Construction / Technical
Playground
<KolVersion _label="1.44.0" />Features with code
Basic version number
The visible version number is defined via _label. The v prefix is added automatically.
<KolVersion _label="2.0.0" />API
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |