Tag

Tag for categorizing or markup.

Examples

Basic

Basic Tag usage. Set the closable to allow it to be closed. It also supports an on:close event.

Tag 1 Link Tag 2 Prevent Close

View Code

<Tag>Tag 1</Tag>
<Tag>
  <a href="https://svant.dev">Link</a>
</Tag>
<Tag closable on:close="{tag2Message}">Tag 2</Tag>
<Tag closable on:close="{tag3Message}">Prevent Close</Tag>

<script>
  import { Tag, message } from "svant";

  function tag2Message() {
    message.info("Tag 2 closed");
  }

  function tag3Message(e) {
    e.detail.preventClose();
    message.info("Tag 3 clicked but close was prevented");
  }
</script>

Colors

The Tag has a set of predefined colors. The color can also be set to a custom hex color string.

Presets:

magenta red volcano orange gold lime green cyan blue geekblue purple

Custom:

#f50 #2db7f5 #87d068 #108ee9

View Code

<h4 style="{{ marginBottom: 16 }}">Presets:</h4>
<div>
  <Tag color="magenta">magenta</Tag>
  <Tag color="red">red</Tag>
  <Tag color="volcano">volcano</Tag>
  <Tag color="orange">orange</Tag>
  <Tag color="gold">gold</Tag>
  <Tag color="lime">lime</Tag>
  <Tag color="green">green</Tag>
  <Tag color="cyan">cyan</Tag>
  <Tag color="blue">blue</Tag>
  <Tag color="geekblue">geekblue</Tag>
  <Tag color="purple">purple</Tag>
</div>
<h4 style="{{ margin: '16px 0' }}">Custom:</h4>
<div>
  <Tag color="#f50">#f50</Tag>
  <Tag color="#2db7f5">#2db7f5</Tag>
  <Tag color="#87d068">#87d068</Tag>
  <Tag color="#108ee9">#108ee9</Tag>
</div>

<script>
  import { Tag } from "svant";
</script>

Icon

Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag.

Twitter Youtube Facebook LinkedIn

View Code

<Tag icon="{TwitterOutlined}" color="#55acee">Twitter</Tag>
<Tag icon="{YoutubeOutlined}" color="#cd201f">Youtube</Tag>
<Tag icon="{FacebookOutlined}" color="#3b5999">Facebook</Tag>
<Tag color="#55acee">
  <LinkedinOutlined />
  <span class="linkedin-text">LinkedIn</span>
</Tag>

<script>
  import { Tag } from "svant";
  import {
    TwitterOutlined,
    YoutubeOutlined,
    FacebookOutlined,
    LinkedinOutlined
  } from "svant/icons";
</script>

<style>
  .linkedin-text {
    margin-left: 3px;
  }
</style>

Status

There are five different preset colors that can be used to communicate status. The following can be set using the color property. success, processing, error, default, and warning.

Without icon

success processing error warning default

With icon

success processing error warning waiting stop

View Code

<div>
  <h4>Without icon</h4>
  <Tag color="success">success</Tag>
  <Tag color="processing">processing</Tag>
  <Tag color="error">error</Tag>
  <Tag color="warning">warning</Tag>
  <Tag color="default">default</Tag>
</div>

<div>
  <h4>With icon</h4>
  <Tag icon="{CheckCircleOutlined}" color="success">success</Tag>
  <Tag color="processing">
    <SyncOutlined spin />
    <span class="procesing-text">processing</span>
  </Tag>
  <Tag icon="{CloseCircleOutlined}" color="error">error</Tag>
  <Tag icon="{ExclamationCircleOutlined}" color="warning">warning</Tag>
  <Tag icon="{ClockCircleOutlined}" color="default">waiting</Tag>
  <Tag icon="{MinusCircleOutlined}" color="default">stop</Tag>
</div>

<script>
  import { Tag } from "svant";
  import {
    CheckCircleOutlined,
    SyncOutlined,
    CloseCircleOutlined,
    ExclamationCircleOutlined,
    ClockCircleOutlined,
    MinusCircleOutlined
  } from "svant/icons";
</script>

<style>
  .procesing-text {
    margin-left: 3px;
  }
</style>

Add & Remove Dynamically

Tag one Tag two New Tag

View Code

{#each tags as tag, index (tag.id)}
  <Tag closable on:close="{() => removeTag(tag.id)}">{tag.label}</Tag>
{/each}

{#if !inputVisible}
  <Tag
    class="demo-site-add-tag"
    disableTransition="{true}"
    on:click="{onClickAddTag}">
    <PlusOutlined />
    New Tag
  </Tag>
{:else}
  <Input
    bind:value="{newTagValue}"
    class="demo-site-add-tag-input"
    on:enter="{addTag}" />
{/if}

<script>
  import { Tag, Input } from "svant";
  import { PlusOutlined } from "svant/icons";
  import { tick } from "svelte";

  let tags = [
    { label: "Tag one", id: 1 },
    { label: "Tag two", id: 2 }
  ];
  let inputVisible = false;
  let newTagValue = "";

  const addTag = () => {
    inputVisible = false;
    tags[tags.length] = { label: newTagValue, id: tags.length + 1 };
    newTagValue = "";
  };

  const removeTag = tag => {
    tags = tags.filter(t => t.id !== tag.id);
  };

  const onClickAddTag = async () => {
    inputVisible = true;
    await tick();
    document.querySelector(".ant-input").focus();
  };
</script>

<style>
  :global(.demo-site-add-tag) {
    background: #fff;
    border-style: dashed;
    cursor: pointer;
  }

  :global(.demo-site-add-tag-input) {
    display: inline-block;
    width: 78px;
    height: 23px;
    vertical-align: middle;
  }
</style>

Controlled Visibility

The visibility can be controlled using the visible prop.

Movies

View Code

<Tag {visible} closable on:close="{onClose}">Movies</Tag>

<div style="margin-top: 15px;">
  <Button size="small" on:click="{toggleVisibility}">Toggle</Button>
</div>

<script>
  import { Tag, Button } from "svant";

  let visible = true;

  const toggleVisibility = () => {
    visible = !visible;
  };

  const onClose = () => {
    visible = false;
  };
</script>

Checkable

Use the checked prop to make the Tag work like a checkbox. Click a tag to toggle its checked state.

Categories: Movies Books Music Sports

View Code

<span style="margin-right: 8px;">Categories:</span>
{#each tags as tag (tag.label)}
  <Tag
    checked="{tag.selected}"
    on:click="{() => {
      toggleSelected(tag.label);
    }}">
    {tag.label}
  </Tag>
{/each}

<script>
  import { Tag } from "svant";

  let tags = [
    {
      label: "Movies",
      selected: false
    },
    {
      label: "Books",
      selected: true
    },
    {
      label: "Music",
      selected: false
    },
    {
      label: "Sports",
      selected: false
    }
  ];

  const toggleSelected = label => {
    const tagsCopy = [...tags];
    const tag = tagsCopy.find(t => t.label === label);
    tag.selected = !tag.selected;
    tags = [...tagsCopy];
  };
</script>

API

Attributes

Property	Description	Type	Default
closable	Whether the Tag can be closed	Boolean	false
visible	Whether the Tag is closed or not	Boolean	false
color	Color of the tag. See examples above in the `Color` and `Status` sections for details	String
class	Class name or class object (e.x. class={{'abc':true}}) for the Tag.	String\|Object
icon	Sets the icon of the tag	SvelteComponent
checked	Checked status of Tag. If this prop is included the tag will be `checkable` and the background will be transparent by default	Boolean
disableTransition	Disable the fade and scale effect when the tag appears/disappears	Boolean	false

Events

Name	Description
click	Specify a function that will be called when a user clicks the tag.
close	Specify a function that will be called when the user closes the tag by clicking the close icon. To prevent the tag from closing, a `event.detail.preventClose()` function is exposed.