Skip to content
UI
v0.3.1

Search the docs

Tag

A filter or a chosen value, optionally removable.

Example

EUR USD GBP High volatility
tag.example.svelte 
<script lang="ts">
  import { Tag } from '@onlywin/ui-svelte';

  let currencies = $state(['EUR', 'USD', 'GBP']);
</script>

<div class="example-row">
  {#each currencies as currency (currency)}
    <Tag
      label={currency}
      onRemove={() =>
        (currencies = currencies.filter((item) => item !== currency))}
    />
  {/each}
  <Tag label="High volatility" icon="zap" />
</div>

Usage

Do

  • Use it for applied filters and chosen values.

Don’t

  • Do not use it for status; use Badge.

Accessibility

  • The remove button is named “Remove …”.

Keyboard

Tag keyboard interactions
Keys Action
Enter, Space Activate
Tab, Shift+Tab Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Tag props
Prop Type Default Description
icon TUiIconName —
label *required string —
onRemove () => void — Shows a remove button.