OudsTag class

OUDS Tag Design Guidelines

Reference design version : 1.5.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.

Icon selection is 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

• 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

// 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(),
);