eds-tag

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

Plain HTML

In React and Vue

Overview

EdsTag is a stylized label component designed to display short, categorical information. It supports multiple visual styles defined by the intent prop and three sizes.

Properties

Property	Attribute	Description	Type	Default
`intent`	`intent`	The visual style or intent of the tag.	`"brand" \| "brand-dark" \| "dark" \| "inverse" \| "primary" \| "strong"`	`'brand'`
`label` (required)	`label`	The label to be displayed inside the tag.	`string`	`undefined`
`size`	`size`	The size of the tag: small, medium, or large.	`"large" \| "medium" \| "small"`	`'large'`

Dependencies

Used by

Graph

graph TD;
  eds-card-app --> eds-tag
  eds-card-generic --> eds-tag
  eds-kg-learning-resources --> eds-tag
  style eds-tag fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS