<script>
  import { Tag } from "carbon-components-svelte";
  import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
  import Preview from "../../components/Preview.svelte";
</script>

### Default

<Tag>IBM Cloud</Tag>

### Small size

<Tag size="sm">IBM Cloud</Tag>

### Tag types

<Tag type="red">red</Tag>
<Tag type="magenta">magenta</Tag>
<Tag type="purple">purple</Tag>
<Tag type="blue">blue</Tag>
<Tag type="cyan">cyan</Tag>
<Tag type="teal">teal</Tag>
<Tag type="green">green</Tag>
<Tag type="gray">gray</Tag>
<Tag type="cool-gray">cool-gray</Tag>
<Tag type="warm-gray">warm-gray</Tag>
<Tag type="high-contrast">high-contrast</Tag>
<Tag type="outline">outline</Tag>

### Filterable

<Tag filter on:close>carbon-components</Tag>

### Filterable (disabled)

<Tag filter disabled on:close>carbon-components</Tag>

### Filterable (small)

<Tag size="sm" filter on:close>carbon-components</Tag>

### Custom icon

Note: rendering a custom icon cannnot be used with the filterable variant.

<Tag icon={IbmCloud}>IBM Cloud</Tag>

### Interactive variant

Set `interactive` to `true` to render a `button` element instead of a `div`.

<Tag interactive>Machine learning</Tag>

### Disabled

The filterable and interactive tag variants have a disabled state.

<Tag filter disabled>Machine learning</Tag>
<Tag interactive disabled>Machine learning</Tag>

### Skeleton

<Tag skeleton />

### Skeleton (small)

<Tag size="sm" skeleton />