npm package: @forter/tag
Description: Tag from Forter Components
Author: Forter Developers
Latest version: 4.3.3

# fc-tag

An element to display element when showing tags
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/display-components-tag--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Ftag) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/tag/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/tag) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/tag/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/tag) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/tag/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/tag)

## Usage

```html
<script>
   import '@forter/tag';
</script>

<fc-tag>
    TAG
</fc-tag>
```

## Examples

```html
<!-- Mix - Fill - Secondary -->
<fc-tag type="fill" intent="secondary">test</fc-tag>

<!-- Mix - Fill - Primary -->
<fc-tag type="fill" intent="primary">pending</fc-tag>

<!-- Mix - Fill - Warn -->
<fc-tag type="fill" intent="warn">★ vib</fc-tag>

<!-- Mix - Fill - Success -->
<fc-tag type="text" intent="success">approve</fc-tag>

<!-- Mix - Fill - Danger -->
<fc-tag type="text" intent="danger">decline</fc-tag>

<!-- Mix - Fill - Cacnel -->
<fc-tag type="text" intent="cancel">not reviewed</fc-tag>
```

## Properties

| Property    | Attribute   | Type                                             | Default | Description                                 |
|-------------|-------------|--------------------------------------------------|---------|---------------------------------------------|
| `clickable` | `clickable` | `boolean`                                        | false   | Whether the tag is click able               |
| `disabled`  | `disabled`  | `boolean`                                        | false   | Whether the input is disabled               |
| `intent`    | `intent`    | `"primary" \| "secondary" \| "success" \| "danger" \| "warn"` |         | The button's intent. See Intents in README. |
| `type`      | `type`      | `"fill" \| "text"`                               |         | The tag style type.                         |

## CSS Custom Properties

| Property                 | Description                             |
|--------------------------|-----------------------------------------|
| `--fc-tag-background`    | default: `rgba(0, 0, 0, 0.05)`          |
| `--fc-tag-border`        | default: `1px solid rgba(0, 0, 0, 0.1)` |
| `--fc-tag-border-radius` | default: `4px`                          |
| `--fc-tag-color`         | default: `rgba(0, 0, 0, 0.65)`          |
| `--fc-tag-cursor`        | default: `pointer`                      |
| `--fc-tag-font-size`     | default: `12px`                         |
| `--fc-tag-height`        | default: `18px`                         |
| `--fc-tag-padding`       | default: `0px`                          |