fc-tag

An element to display element when showing tags

Usage

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

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

Examples

<!-- 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 |