Primitives

Tag

A labelled chip, optionally removable.

data-scope="tag"

Usage

ReactVueSvelteAngular

import { Tag } from "@crosskit-ui/react";

<Tag color="primary" onRemove={() => drop(id)}>
  design
</Tag>

<script setup lang="ts">
import { Tag } from "@crosskit-ui/vue";
</script>

<template>
  <Tag color="primary" @remove="drop(id)">design</Tag>
</template>

<script lang="ts">
  import { Tag } from "@crosskit-ui/svelte";
</script>

<Tag color="primary" onRemove={() => drop(id)}>design</Tag>

import { CkTag } from "@crosskit-ui/angular";

@Component({
  imports: [CkTag],
  template: `<ck-tag color="primary" (remove)="drop(id)">design</ck-tag>`,
})
export class Demo {}

Props

Prop	Type	Default	Notes
`color`	"default" \| "primary" \| "success" \| "warning" \| "error" \| "info"	`"default"`	Colour.
`variant`	"default" \| "outline" \| "solid"	`"default"`	Fill style.
`closable`	boolean	`false`	Renders a close button.
`onClose`	() => void	—	Called when the close button is used.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.