# `m-tag`

A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `type` | Defines the behavior and layout of the tag. | `'informative'` `'interactive'` `'contextualised'` `'removable'` `'selectable'` | `informative` |
| `size` | Determines the size of the tag. | `'s'` `'m'` `'l'` | `m` |
| `id` | A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'. | `string` |   |
| `name` | The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable'). | `string` |   |
| `label*` | The text label displayed next to the tag. | `string` |   |
| `checked` | The tag's checked state. Used only for type: 'selectable'. | `boolean` | `$bindable()` |
| `disabled` | If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types. | `boolean` |   |
| `contextualisednumber` | A number displayed in the badge when the tag is contextualised. | `number` | `99` |
| `removablelabel` | Accessible label text for the remove button in removable tags. | `string` |   |
| `onremove` | Callback to trigger when the remove button is clicked. | `() => void` |   |

## Slots

| Name | Description |
|------|-------------|
| `icon` | Use this slot to insert an icon in the tag. |

## Events

| Name | Description | Type |
|------|------|-------------|
| `remove-tag` | Emits when the remove button of a tag is clicked, passing the tag's ID. | `CustomEvent<string>` |

## Dependencies

### Depends on

- [m-number-badge](../numberbadge/README.md)

### Graph

```mermaid
graph TD;
  m-tag --> m-number-badge
style m-tag fill:#008240,stroke:#333,stroke-width:4px
```

