# Tag


## Examples

### Default

```html
<m-tag
      icon=${ifDefined(args.icon)}
      variant=${ifDefined(args.variant)}
      ?large=${ifDefined(args.large)}
    >Category</m-tag
    >
```

### WithIcon

```html
<m-tag icon=${ifDefined(args.icon)} variant=${ifDefined(args.variant)}
      >Featured</m-tag
    >
```

### Variants

```html
<m-stack direction="vertical" spacing="s">
      ${Object.values(TagVariant).map(
        (variant) =>
          html`<m-stack direction="horizontal" alignment="start" spacing="xs">
            <m-tag variant=${variant}>${variant}</m-tag>
            <m-tag icon="tag-simple" variant=${variant}>${variant}</m-tag>
          </m-stack> `
      )}
    </m-stack>
```

### LargeVariants

```html
<m-stack direction="vertical" spacing="s">
      ${Object.values(TagVariant).map(
        (variant) =>
          html`<m-stack direction="horizontal" alignment="start" spacing="xs">
            <m-tag variant=${variant} large>${variant}</m-tag>
            <m-tag icon="tag-simple" variant=${variant} large>${variant}</m-tag>
          </m-stack> `
      )}
    </m-stack>
```

### WithSection

```html
<m-section variant="box">
    <m-tag variant="success">
      <m-icon name="star" slot="start"></m-icon>
      Section
    </m-tag>
  </m-section>
```

## Usage
Use the Tag component to:
- Indicate status or progress (e.g., "Pending," "Approved")
- Highlight categories or types (e.g., "Admin," "User")
- Draw attention to new or updated content (e.g., "New")
- Help users filter or identify items by type in lists, cards, or other grouped components


## Other Considerations

- **Concise Wording:** Use one or two words for clear communication (e.g., "New," "Alert").
- **Consistent Use:** Apply tags only where necessary and avoid overuse to prevent visual clutter.
- **Positioning:** Place tags in consistent positions, such as at the top-right corner of cards or lists, so users can easily scan for information.