Tag

Version	Tag	Status	API
v1	`<oc-tag-v1>`	Stable, allowed for generation	TagV1

Overview (v1)

Source: ./src/components/tag/v1/Overview.mdx

The tag component serves as a versatile label for various content types. It offers attributes for adjusting size, breakpoint-specific sizes, and offers for a wide range of styles. Additionally, it supports an interactive clickable info icon, enhancing functionality and user interaction.

Default variation

Story Default:

<oc-tag-v1 size="100" variant="info-primary">Label</oc-tag-v1>

Configuration

The tag component offers the styling variants error, hint, info-primary, info-secondary, sale, sold-out, success, and warning. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see how the changes affect the component in real-time.

Usage guidelines

Before integrating the tag component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Layout considerations

This component has an extended hitbox. The touch area extends beyond its bounding box, so it may be activated when the user clicks or taps outside the visible component area. Ensure sufficient margin around the component to prevent unintended interactions with adjacent elements.

Accessibility

The tag component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Use `oc-aria-label`

To make the tag recognizable for screen readers, use the default slot to provide a clear and descriptive label. Use the aria-label attribute on the label to provide additional context if the visible label is not sufficient. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

Configuration (v1)

Source: ./src/components/tag/v1/Configuration.mdx

Tag configuration

Configure the tag component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<oc-tag-v1 size="100" variant="info-primary">Label</oc-tag-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Source: ./src/components/tag/v1/TagV1.API.g.mdx

Tag v1 API

API: `<oc-tag-v1>` (TagV1)

Attributes / properties

Attribute	Type	Default	Required	Description
`variant`	`"error" \| "success" \| "warning" \| "hint" \| "sale" \| "custom-color-strong" \| "custom-color-soft" \| "info-primary" \| "sold-out" \| "info-secondary" \| "service"`	`"info-primary"`	no	Sets the main styling of the tag.
`size`	`"50" \| "100" \| "25"`	`"100"`	no	Sets the size of the tag.
`size-m`	`"50" \| "100" \| "25"`	`undefined`	no	Sets the size of the tag for breakpoint m.
`size-l`	`"50" \| "100" \| "25"`	`undefined`	no	Sets the size of the tag for breakpoint l.
`show-info-icon`	`boolean`	`false`	no	Displays an clickable info icon inside the tag.
`oc-aria-label`	`string`	`undefined`	no	Sets the ARIA label of the tag.

Slots

Slot	Required	Description
`default`	yes	Sets the text content of the tag label.

Events

Event	Detail type	Description
`oc-property-change`	`OcTagV1Events["oc-property-change"]`	Whenever a property value changes, this event triggers. Use this event to track all property changes within the component. Refer to the Events documentation for more information.
`oc-mount`	`{ component: string; }`	Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
`oc-unmount`	`{ component: string; }`	Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

CSS custom properties

Custom property	Default	Description
`--background-color`	`undefined`	Sets a custom background color through a CSS variable. Note: The preferred way of using colors is via design tokens instead of hex values. Note: This CSS variable only applies when using `variant="custom-color-strong"` or `variant="custom-color-soft"`.
`--text-color`	`undefined`	Sets a custom text color through a CSS variable. Note: The preferred way of using colors is via design tokens instead of hex values. Note: This CSS variable only applies when using `variant="custom-color-strong"` or `variant="custom-color-soft"`.

Variations (v1)

Source: ./src/components/tag/v1/Variations.mdx

Variations

Listed below are the most common variations of the tag component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-tag-variations--default · tags: components

The default configuration of the tag uses the info-primary variant and size=100.

<oc-tag-v1 size="100" variant="info-primary">Label</oc-tag-v1>

Interactive tag via info icon

Story: components-tag-variations--show-info-icon · tags: components

The show-info-icon attribute set to true will display an info icon on the right side of the tag. With this attribute set, the tag becomes clickable and focusable e.g., via keyboard. This behavior is available for all variants. To test it, click on the following canvas and press the Tab key.

Args: show-info-icon=true

<oc-tag-v1 size="100" variant="info-primary" show-info-icon>Label</oc-tag-v1>

Responsive sizing

Story: components-tag-variations--responsive-size · tags: components

The size-m and size-l attributes enable responsive sizing, adjusting the size of the tag for medium and large viewports, respectively.

<div style="display: flex; gap: 8px; margin-top: 4px">
  <oc-tag-v1 variant="info-primary" size="50">Fixed size</oc-tag-v1>
  <oc-tag-v1 variant="info-primary" size="25" size-m="50" size-l="100"
    >Responsive size</oc-tag-v1
  >
</div>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Responsive sizing",
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <div style="display: flex; gap: 8px; margin-top: 4px">
      <oc-tag-v1 variant="info-primary" size="50">Fixed size</oc-tag-v1>
      <oc-tag-v1 variant="info-primary" size="25" size-m="50" size-l="100"
        >Responsive size</oc-tag-v1
      >
    </div>`;
  }
}

Custom Color Strong

Story: components-tag-variations--custom-color-strong · tags: components

The custom-color-strong variant with custom colors for background and text

<div style="display: flex; gap: 8px; margin-top: 4px">
  <oc-tag-v1
    style="--background-color: var(--oc-semantic-color-background-strong-mint); --text-color: var(--oc-semantic-color-text-inverted)"
    variant="custom-color-strong"
    size="50"
    >Label</oc-tag-v1
  >
</div>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Custom Color Strong",
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <div style="display: flex; gap: 8px; margin-top: 4px">
      <oc-tag-v1
        style="--background-color: var(--oc-semantic-color-background-strong-mint); --text-color: var(--oc-semantic-color-text-inverted)"
        variant="custom-color-strong"
        size="50"
        >Label</oc-tag-v1
      >
    </div>`;
  }
}

Custom Color Soft

Story: components-tag-variations--custom-color-soft · tags: components

The custom-color-strong variant with custom colors for background and text

<div style="display: flex; gap: 8px; margin-top: 4px">
  <oc-tag-v1
    style="--background-color: var(--oc-semantic-color-background-soft-mint); --text-color: var(--oc-semantic-color-text-default)"
    variant="custom-color-soft"
    size="50"
    >Label</oc-tag-v1
  >
</div>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Custom Color Soft",
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <div style="display: flex; gap: 8px; margin-top: 4px">
      <oc-tag-v1
        style="--background-color: var(--oc-semantic-color-background-soft-mint); --text-color: var(--oc-semantic-color-text-default)"
        variant="custom-color-soft"
        size="50"
        >Label</oc-tag-v1
      >
    </div>`;
  }
}

Demo: overflow

Story: components-tag-variations--overflow · tags: components

A demo showcasing the truncation of an overly long tag label set via the default slot.

Args: defaultSlot=(see snippet)

<div style="max-width: 500px">
  <oc-tag-v1 ${spreadProps(props)}>Tags are not intended to hold long strings of text. If you try to use them that way anyway, the text will be truncated automatically.</oc-tag-v1>
</div>

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: overflow",
  args: {
    defaultSlot: "Tags are not intended to hold long strings of text. If you try to use them that way anyway, the text will be truncated automatically."
  },
  render({
    defaultSlot,
    ...props
  }) {
    return html` <div style="max-width: 500px">
      <oc-tag-v1 ${spreadProps(props)}>${unsafeHTML(defaultSlot)}</oc-tag-v1>
    </div>`;
  }
}

Overview (v1)

Tag

Default variation

Configuration

Usage guidelines

Layout considerations

Accessibility

Use oc-aria-label

Further reading

Configuration (v1)

Tag configuration

API v1

Tag v1 API

API: <oc-tag-v1> (TagV1)

Attributes / properties

Slots

Events

CSS custom properties

Variations (v1)

Variations

Default

Interactive tag via info icon

Responsive sizing

Custom Color Strong

Custom Color Soft

Demo: overflow

Use `oc-aria-label`

API: `<oc-tag-v1>` (TagV1)