OudsLabelText class

OUDS Label Design Guidelines

Reference design version : 1.0.0

Label styles are intended for compact interface elements such as buttons, form fields, badges, and other small components. Unlike other typography categories, they are not responsive and maintain a fixed size across all breakpoints. This ensures visual consistency and predictable behavior within space-constrained UI elements. Labels should be preferred whenever content is displayed within small components.

OudsLabelText(
  text: 'Submit',
  size: OudsLabelTextSize.medium,
  weight: OudsTextWeight.strong,
)

A color override can be provided when the default theme color is not suitable, for example when the text is displayed on a colored surface:

OudsLabelText(
  text: 'Submit',
  size: OudsLabelTextSize.medium,
  color: OudsTheme.of(context).colorScheme(context).contentDefault,
)

Multiple colors can be used simultaneously within the same text.

This widget also accepts lightweight rich text: **bold**, ~~line through~~ and [link](https://example.com) are supported directly in text, and a .rich constructor (OudsLabelText.rich) is exposed to color only part of the text. Build the .rich constructor's text argument with buildOudsAnnotatedText.

The user must ensure that the contrast between the colors used meets current accessibility standards and that the colors align with the brand’s and its entity’s visual identity.

OudsLabelText.rich(
  text: buildOudsAnnotatedText((builder) {
    builder.append('Submit ');
    builder.withColor((context) => color, () => builder.append('now'));
  }),
)

Use onLinkTap to handle taps on markdown-style links ([label](url)) embedded in text:

OudsLabelText(
  text: 'See [terms and conditions](https://example.com/terms)',
  size: OudsLabelTextSize.medium,
  onLinkTap: (url) {
    // Open the URL, e.g. via url_launcher.
  },
)