Structure

OUDSTag

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.

iOS 15.0+
macOS 13.0+
tvOS 16.0+
visionOS 1.0+
watchOS 11.0+

@MainActor struct OUDSTag

Mentioned In

Indicators

Appearances

Tags have two appearances so as to highlight or not their content:

emphasized: A tag with a solid, high-contrast background. Used to draw strong attention to important labels or categories. Emphasized tags stand out prominently against the interface and are ideal for primary or high-priority information.
muted: A tag with a subtle, light, or semi-transparent background. Used for secondary or less prominent information. Muted tags blend more with the background, providing a softer visual emphasis compared to emphasized tags.

Status

Tags have seven status depending on the context of the information they represent. Each state is designed to convey a specific meaning and ensure clarity in communication.

Neutral: Default or inactive state. Used for standard labels, categories, or when no specific status needs to be communicated.
Accent: Used to draw attention to new features, recommendations, or content suggestions. Invites users to explore and engage with new offerings, creating an exciting and engaging experience.
Positive: Indicates success, confirmation, or a positive status. Commonly used to highlight completed actions or approved items.
Warning: Signals caution or a potentially risky situation. Used to draw attention to items requiring user awareness or intervention.
Negative: Represents errors, critical issues, or urgent attention needed. Used to highlight problems or failed actions.
Info: Conveys informational messages or supplementary details. Used for neutral, helpful, or contextual information.
Disabled: Shows that the tag is inactive and cannot be interacted with. Appears faded or greyed out. This is not allowed when loader is activated.

Shape

Tags can have two shapes:

Rounded: A tag with fully rounded corners, creating a pill-shaped appearance. Rounded tags offer a softer and more approachable look, suitable for most modern interfaces.
Square: A tag with sharp, square corners. Squared tags provide a more formal, structured, or technical feel. They are often used in business contexts to label promotions, offers, or important notices.

Size

Tags can have two sizes:

Default: The standard tag size, suitable for most use cases and offering good readability.
Small: A compact tag with reduced height and font size. Used when saving space is important or when grouping elements visually.

Layout

There are four available layouts for tags:

-Text only: A tag that displays only text. Used for simple labels, categories, or keywords without additional visual elements.

-Text + Bullet: A tag with a small indicator (dot) alongside the text. Used to show status, presence, or activity next to the label.

-Text + Icon: A tag that includes an icon before the text. Used to visually reinforce the meaning of the tag, such as status, type, or action.

Text + Loader: A tag that combines a loading spinner (or progress indicator) with text. Used to indicate that a process or action related to the tag is in progress.

Code samples

    // Text only with neutral status, for emphasized appearance with rounded shape in default size
    OUDSTag(label: "Label",  status: .neutral(), appearance: .emphasized, shape: .rounded, size: .default)
    // Or also
    OUDSTag(label: "Label")
    // Or from a localizale and a bundle
    OUDSTag(LocalizedStringKey("label_wording"), bundle: Bundle.module)

    // Tag with neutral status with bullet
    OUDSTag(label: "Label", status: .neutral(leading: .bullet)

    // Tag with neutral status with a custom decorative icon
    OUDSTag(label: "Label", status: .neutral(icon: Image(decorative: "ic_heart")))
    // If your layout is in RTL mode but your tag has an icon with another meaning because of bad orientation,
    // you can flip the icon
    OUDSTag(label: "Label", status: .neutral(icon: Image(decorative: "ic_heart"), flipIcon: true))

    // Text with neutral status with bullet
    OUDSTag(label: "Label", status: .neutral(bullet: true))

    // Tag with loader with rounded shape in small size
    OUDSTag(loadingLabel: "Label", shape: .rounded, size: .small)

Design documentation

unified-design-system.orange.com

Themes rendering

Orange

A tag component in light and dark modes with Orange theme

Orange Compact

A tag component in light and dark modes with Orange Compact theme

Sosh

A tag component in light and dark modes with Sosh theme

Wireframe

A tag component in light and dark modes with Wireframe theme

Version
1.4.0 (Figma component design version)

Since
0.18.0

Topics

Structures

struct Status
The status of an OUDSTag determines the leading element, the background and the content colors of the tag according to the category.

Initializers

Instance Properties

var body: some View