@forter/tag NPM

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`