Tag

A component for categorizing or labeling content with keywords.

Basic Usage

The most basic usage.

Tag 1Tag 2GitHub
<prism-tag>Tag 1</prism-tag>
<prism-tag>Tag 2</prism-tag>
<prism-tag>
  <a href="https://github.com/devhabib/prism-monorepo" target="_blank">GitHub</a>
</prism-tag>

Colors

We provide five preset colors for different statuses, and you can also set custom hex colors.

defaultsuccessprocessingwarningerror#108ee9#87d068
<prism-tag color="success">success</prism-tag>
<prism-tag color="processing">processing</prism-tag>
<prism-tag color="warning">warning</prism-tag>
<prism-tag color="error">error</prism-tag>
<prism-tag color="#108ee9">#108ee9</prism-tag>

Closable

Tags can be closed by clicking the close icon.

Closable 1Prevent Default
<prism-tag [closable]="true" (closed)="onClose($event)">Closable 1</prism-tag>
<prism-tag [closable]="true" (closed)="$event.preventDefault()">Prevent Default</prism-tag>

Checkable

Selectable tags that act like checkboxes.

Checkable 1Checkable 2
<prism-tag [checkable]="true" [(checked)]="checked1">Checkable 1</prism-tag>
<prism-tag [checkable]="true" [(checked)]="checked2">Checkable 2</prism-tag>

APINameTypeDefaultDescription
colorstring'default'Color of the tag (presets: 'success', 'processing', 'error', 'warning', 'default' or hex).
checkablebooleanfalseWhether the tag is checkable.
checkedbooleanfalseWhether the tag is checked (two-way bindable).
closablebooleanfalseWhether the tag can be closed.
visiblebooleantrueWhether the tag is visible (two-way bindable).
closedEventEmitter<MouseEvent>-Callback executed when tag is closed.

Name	Type	Default	Description
`color`	`string`	`'default'`	Color of the tag (presets: 'success', 'processing', 'error', 'warning', 'default' or hex).
`checkable`	`boolean`	`false`	Whether the tag is checkable.
`checked`	`boolean`	`false`	Whether the tag is checked (two-way bindable).
`closable`	`boolean`	`false`	Whether the tag can be closed.
`visible`	`boolean`	`true`	Whether the tag is visible (two-way bindable).
`closed`	`EventEmitter<MouseEvent>`	`-`	Callback executed when tag is closed.