`<c-tags>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div style="display: grid; gap: 1rem">
    <c-tags>
      <c-tag active>All</c-tag>

      <c-tag>Biosciences</c-tag>

      <c-tag>Chemistry</c-tag>

      <c-tag>Physics</c-tag>
    </c-tags>

    <c-tags size="small">
      <c-tag active>All</c-tag>

      <c-tag>Biosciences</c-tag>

      <c-tag>Chemistry</c-tag>

      <c-tag>Physics</c-tag>
    </c-tags>
  </div>
</template>

Label

Vue

React

Angular

TypeScript

<template>
  <c-tags label="Research fields" required>
    <c-tag active>All</c-tag>

    <c-tag>Biosciences</c-tag>

    <c-tag>Chemistry</c-tag>

    <c-tag>Physics</c-tag>
  </c-tags>
</template>

Basic · c-tag

Vue

React

Angular

TypeScript

<template>
  <div class="example-row">
    <c-tag>Default</c-tag>

    <c-tag active>Active</c-tag>

    <c-tag badge="3">With badge</c-tag>

    <c-tag flat>Flat</c-tag>

    <c-tag size="small">Small</c-tag>
  </div>
</template>

Closeable · c-tag

Vue

React

Angular

TypeScript

<template>
  <div class="example-grid">
    <c-tags>
      <c-tag
        v-for="topic in topics"
        :key="topic.id"
        :active="topic.active"
        closeable
        @click="topic.active = !topic.active"
        @close="onRemoveTopic(topic.id)"
      >
        {{ topic.label }}
      </c-tag>
    </c-tags>

    <div>
      <c-button @click="onResetTopics()">Reset topics</c-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const createTopics = () => {
  return [
    { id: 'biosciences', label: 'Biosciences', active: false },
    { id: 'chemistry', label: 'Chemistry', active: false },
    { id: 'physics', label: 'Physics', active: false },
  ];
};

const topics = ref(createTopics());

const onRemoveTopic = (topic: string) => {
  topics.value = topics.value.filter((t) => t.id !== topic);
};

const onResetTopics = () => {
  topics.value = createTopics();
};
</script>

API reference

`<c-tags>`

Properties

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	`''`	Label of the tag group, shown above the tags
`required`	`required`	`boolean`	`false`	Set as required — shows the required marker on the label
`size`	`size`	`CTagsSize`	`'default'`	Size of the tags

Slots

Slot	Description
`default`	Default slot for the c-tag elements

CSS parts

Style from outside with c-tags::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The wrapper stacking the group label above the tags
`label`	The group label rendered above the tags
`items`	The wrapping row that lays out the slotted tags

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CTagsProps`

export interface CTagsProps {
  /**
   * Label of the tag group, shown above the tags
   *
   * @freeform
   */
  label?: string;
  /**
   * Set as required — shows the required marker on the label
   */
  required?: boolean;
  /**
   * Size of the tags
   *
   * @seeded from csc-ui — verify
   */
  size?: CTagsSize;
}

`CTagsSize`

Size propagated to every slotted `<c-tag>`. `small` renders compact tags; omitting the attribute leaves the tags at their default size.

export type CTagsSize = 'default' | 'small';

`<c-tag>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	`false`	Mark tag as active
`badge`	`badge`	`null \| number \| string`	`null`	Display an optional badge at the start of the tag
`closeable`	`closeable`	`boolean`	`false`	Mark tag as closeable
`flat`	`flat`	`boolean`	`false`	Remove the hover effect
`size`	`size`	`CTagSize`	`'default'`	Size of the tag

Events

Event	Detail	Description
`close`	`void`	Fired when the tag's close button is activated.

Slots

Slot	Description
`default`	Default slot

CSS parts

Style from outside with c-tag::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The tag's visible pill-shaped box

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CTagProps`

export interface CTagProps {
  /**
   * Mark tag as active
   *
   * @seeded from csc-ui — verify
   */
  active?: boolean;
  /**
   * Display an optional badge at the start of the tag
   *
   * @seeded from csc-ui — verify
   */
  badge?: null | number | string;
  /**
   * Mark tag as closeable
   *
   * @seeded from csc-ui — verify
   */
  closeable?: boolean;
  /**
   * Remove the hover effect
   *
   * @seeded from csc-ui — verify
   */
  flat?: boolean;
  /**
   * Size of the tag
   *
   * @seeded from csc-ui — verify
   */
  size?: CTagSize;
}

`CTagSize`

Size of the tag. `small` renders a more compact pill; omitting the attribute renders the default size.

export type CTagSize = 'default' | 'small';