No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Tag

A small label, generally appearing inside or in close proximity to another larger interface component, representing a status, property, or some other metadata.

Standard HTML
Tag
<div class="tag">
  <div class="tag-text">Tag</div>
</div>
NameDescriptionDefaultControl
General
Variant
Defines the color variant of the component.
string
-
Size
Defines the size of the component.
string
-
Show Icon
Whether to renderd the component with an icon or not.
boolean
-
Markup
The markup to put in the component.
Markup accepted: inline content.
string
-

Make sure the @swisspost/design-system-styles package is already present in your project or follow the installation guidelines.

To import all Design System styles:

@use '@swisspost/design-system-styles/index.scss';

To import only the styles required for this component:

@use '@swisspost/design-system-styles/basics.scss';
@use '@swisspost/design-system-styles/components/tag.scss';

An icon is an optional part of the tag component. You can choose any icon that is available in Swiss Post Icon Library. Find the icon you need with the icon search page.

Tag

Here is a quick overview of all the background colors available for this component.

White
Yellow
Success
Warning
Danger
Info
Web Component
Tag 
<post-tag>Tag</post-tag>
NameDescriptionDefaultControl
props
variant
Defines the color variant of the component.
"error""info""success""warning""white""yellow"
size
Defines the size of the component.
"sm"
null
icon

Defines the icon name inside of the component. If not set the icon will not show up.To learn which icons are available, please visit our icon library.

string
null
slots
default
Content to place in the default slot.

Markup accepted: inline content.

other
-

The <post-tag> element is part of the @swisspost/design-system-components package. For more information, read the getting started with components guide.

An icon is an optional part of the tag component. You can choose any icon that is available in Swiss Post Icon Library. Find the icon you need with the icon search page.

Tag

Here is a quick overview of all the background colors available for this component.

White Yellow Success Warning Danger Info