# Tag
[component-header:sl-tag]
Tags are used as labels to organize things or to indicate a selection.
```html preview
Primary
Success
Neutral
Warning
Danger
```
```jsx react
import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
Primary
Success
Neutral
Warning
Danger
>
);
```
## Examples
### Sizes
Use the `size` attribute to change a tab's size.
```html preview
Small
Medium
Large
```
```jsx react
import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
Small
Medium
Large
>
);
```
### Pill
Use the `pill` attribute to give tabs rounded edges.
```html preview
Small
Medium
Large
```
```jsx react
import { SlTag } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
Small
Medium
Large
>
);
```
### Removable
Use the `removable` attribute to add a remove button to the tag.
```html preview
Small
Medium
Large
```
```jsx react
import { SlTag } from '@shoelace-style/shoelace/dist/react';
const css = `
.tags-removable sl-tag {
transition: var(--sl-transition-medium) opacity;
}
`;
const App = () => {
function handleRemove(event) {
const tag = event.target;
tag.style.opacity = '0';
setTimeout(() => (tag.style.opacity = '1'), 2000);
}
return (
<>
Small
Medium
Large
>
);
};
```
[component-metadata:sl-tag]