@forter/tag

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