OudsTag class

A tag is a small element that shows short info like a label, keyword, or category. It helps users quickly find, group, or understand content. Tags can stay in place or be removed, and can include icons or actions like close or edit.

This version of the tag uses the text only layout which is the most used layout. Other layouts are available for this component: text + icon, text + bullet and text + loader.

parameters :

• status : The tag's status, OudsTagStatus influencing its color and style (e.g., negative, positive, warning).
• 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.
• icon : An optional SVG asset name to display an icon within the tag.
• hierarchy: The Tag appearance based on its OudsTagHierarchy.
• layout: Defines the layout to be used for the tag OudsTagLayout.

Styling details :

• The background color is determined by the status, using OudsTagStatus.
• The size and margins are adjusted according to the badge size via OudsTagSize.

You can use OudsTag like this :

Text only tag :

This is the default layout of the component.

OudsTag(
      label: 'Label',
      status: OudsTagStatus.accent,
      size: OudsTagSize.small,
      layout : OudsTagLayout.textAndBullet
    );