OudsTag class

OUDS Tag Design Guidelines

Reference design version : 1.4.0

Tag is a UI element that allows to display short info like a label, keyword, or category. Tag helps users quickly find, group, or understand content.

Tags are highly configurable and can be styled with different statuses, appearances, and layouts to convey specific meanings and fit various visual contexts.

This widget provides three distinct types of tags, each created using a specific named constructor:

• OudsTag.text: A simple tag displaying only text.
• OudsTag.bullet: A tag that includes a bullet point next to the text.
• OudsTag.icon: A tag that displays an icon next to the text.

This API replaces the previous generic constructor and deprecated status model.

Migrating from the Deprecated API

The generic OudsTag() constructor, the status parameter of type OudsTagStatus, and the icon parameter are now deprecated and will be removed in a future version. Please migrate to the new named constructors and the status parameter of type OudsIconStatus for a more robust and consolidated API.

Migration overview

1) Use named constructors

Replace the generic OudsTag() constructor with OudsTag.text(), OudsTag.icon(), or OudsTag.bullet() based on your needs.

2) Replace OudsTagStatus with OudsIconStatus

Replace the old OudsTagStatus enum with the new OudsIconStatus classes (e.g., OudsTagStatus.positive becomes Positive()).

3) Remove icon parameter

The icon parameter is deprecated and will be removed. Icon selection must now be driven by status (OudsIconStatus):

• Functional statuses (Positive, Info, Warning, Negative) provide fixed icons.
• Contextual statuses (Neutral, Accent) can carry a custom icon asset.

Status model

New status type:

• Neutral (optional custom icon)
• Accent (optional custom icon)
• Positive (fixed functional icon)
• Info (fixed functional icon)
• Warning (fixed functional icon)
• Negative (fixed functional icon)

This unifies:

• background color
• icon choice
• icon/text foreground color

Parameters

• status : The recommended way to control the tag's appearance. This object defines the status (e.g., Positive, Negative), the visual appearance (emphasized or muted), and a custom icon for Neutral and Accent statuses.
• size : The size of the tag, OudsTagSize such as small or default, to fit various visual needs.
• label : A text to display inside the tag.
• appearance: The Tag appearance based on its OudsTagAppearance.
• layout: Defines the layout to be used for the tag OudsTagLayout.
• enabled: A boolean indicating whether the tag is enabled or disabled.
• loading: A circular progress indicator displayed in the input or tag area to indicate that tags are being loaded or processed.
• roundedCorners: Controls the shape of the tag. When true, the tag has rounded corners, providing a softer and more approachable look, suitable for most modern interfaces. When false, the tag has sharp, square corners, providing a more formal, structured, or technical feel. Often used in a business context to label promotions, offers or important notices.

Usage Example

Migration Example:

Before (Deprecated API):

// Simple tag
OudsTag(
  label: 'Old Tag',
  status: OudsTagStatus.accent,
  size: OudsTagSize.small,
);

// Tag with a custom icon
OudsTag(
  label: 'Custom',
  layout: OudsTagLayout.textAndIcon,
  status: OudsTagStatus.neutral,
  icon: 'assets/custom_icon.svg',
);

After (Modern API):

// Simple tag
OudsTag.text(
  label: 'New Tag',
  status: Accent(),
  size: OudsTagSize.small,
);

// Tag with a custom icon
OudsTag.icon(
  label: 'Custom',
  status: Neutral(icon: 'assets/custom_icon.svg'),
);

// A Tag with "bullet" type.
OudsTag.bullet(
  label: 'Information',
  status: Info(),
);