data-display — wyrd.component.badge

Badge

Inline styled text for compact status or metadata without adding standalone semantics.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/badge.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Badge  tag: wyrd-badge  package: wyrd.component.badge  title: Badge  summary: Inline styled text for compact status or metadata without adding standalone semantics.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: data-display  composition: single-slot  interactive: falsetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: variant      type:        kind: enum        values:          - neutral          - info          - success          - warning          - danger          - availability      required: false      default: neutral      reflects: true      serializable: true      summary: Visual status tone.  slots:    - name: content      content: true      required: true      cardinality: exactly-one      accepts:        - text      summary: Visible badge text read inline with surrounding content.  events: []  states:    - name: default      source: platform      summary: Neutral inline badge.  parts:    - name: root      summary: Styled text root.      slots:        - content    - name: status-dot      summary: Decorative dot shown by the availability variant.  tokens:    neutral:      background: color.surface-container      foreground: color.on-surface    info:      background: color.secondary      foreground: color.on-secondary    success:      background: color.success-container      foreground: color.on-success-container    warning:      background: color.warning-container      foreground: color.on-warning-container    danger:      background: color.error-container      foreground: color.on-error-container    availability:      background: color.surface-container      foreground: color.accent-strong      dot: color.accent    radius: rounded.fullmessages: []obligations:  accessibility:    role: none    keyboard: []    semantics:      - Adds no standalone semantics; text is read inline with surrounding content.      - Variant color is visual only and must not be the only source of meaning.  behavior:    model: stateless    interactions: []    hostEffects: []  conditions:    - rtl    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - variant    serializableSlots:      - content    eventBindings: []    notes: Badge serializes its variant and inline content text.examples:  - name: neutral    state: default    properties:      variant: neutral    slots:      content: Draft  - name: info    state: default    properties:      variant: info    slots:      content: In review  - name: success    state: default    properties:      variant: success    slots:      content: Published  - name: warning    state: default    properties:      variant: warning    slots:      content: Needs attention  - name: danger    state: default    properties:      variant: danger    slots:      content: Failed  - name: availability    state: default    properties:      variant: availability    slots:      content: Available nowoverrides:  react:    slots:      content: content

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

neutral state: default

Draft

Usage

import { WyrdBadge } from "@wyrd-company/react";

<WyrdBadge variant="neutral" content="Draft" />

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdBadge(
  variant: 'neutral',
  child: Text('Draft'),
)

info state: default

In review

Usage

import { WyrdBadge } from "@wyrd-company/react";

<WyrdBadge variant="info" content="In review" />

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdBadge(
  variant: 'info',
  child: Text('In review'),
)

success state: default

Published

Usage

import { WyrdBadge } from "@wyrd-company/react";

<WyrdBadge variant="success" content="Published" />

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdBadge(
  variant: 'success',
  child: Text('Published'),
)

warning state: default

Needs attention

Usage

import { WyrdBadge } from "@wyrd-company/react";

<WyrdBadge variant="warning" content="Needs attention" />

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdBadge(
  variant: 'warning',
  child: Text('Needs attention'),
)

danger state: default

Failed

Usage

import { WyrdBadge } from "@wyrd-company/react";

<WyrdBadge variant="danger" content="Failed" />

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdBadge(
  variant: 'danger',
  child: Text('Failed'),
)

availability state: default

Available now

Usage

import { WyrdBadge } from "@wyrd-company/react";

<WyrdBadge variant="availability" content="Available now" />

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdBadge(
  variant: 'availability',
  child: Text('Available now'),
)

Properties

Name	Type	Default	Summary
`variant`	`neutral \| info \| success \| warning \| danger \| availability`	`neutral`	Visual status tone.

Slots & events

Slot	Cardinality	Accepts	Summary
`content`	exactly-one	`text`	Visible badge text read inline with surrounding content.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`neutral.background`	`color.surface-container`
`neutral.foreground`	`color.on-surface`
`info.background`	`color.secondary`
`info.foreground`	`color.on-secondary`
`success.background`	`color.success-container`
`success.foreground`	`color.on-success-container`
`warning.background`	`color.warning-container`
`warning.foreground`	`color.on-warning-container`
`danger.background`	`color.error-container`
`danger.foreground`	`color.on-error-container`
`availability.background`	`color.surface-container`
`availability.foreground`	`color.accent-strong`
`availability.dot`	`color.accent`
`radius`	`rounded.full`

States

State	Source	Summary
`default`	platform	Neutral inline badge.

SDUI

Status: serializable. Badge serializes its variant and inline content text.

Serializable	Members
Properties	`variant`
Slots	`content`
Events	`—`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Properties

Slots & events

Tokens

States

Accessibility

SDUI