webawesome/docs/components/tag.md

Tag

[component-header:sl-tag]

Tags are used as labels to organize things or to indicate a selection.

<sl-tag type="primary">Primary</sl-tag>
<sl-tag type="success">Success</sl-tag>
<sl-tag type="info">Info</sl-tag>
<sl-tag type="warning">Warning</sl-tag>
<sl-tag type="danger">Danger</sl-tag>

Examples

Size

Use the size prop to change a tab's size.

<sl-tag type="primary" size="small">Primary</sl-tag>
<sl-tag type="success" size="small">Success</sl-tag>
<sl-tag type="info" size="small">Info</sl-tag>
<sl-tag type="warning" size="small">Warning</sl-tag>
<sl-tag type="danger" size="small">Danger</sl-tag>

<br><br>

<sl-tag size="medium" type="primary">Primary</sl-tag>
<sl-tag size="medium" type="success">Success</sl-tag>
<sl-tag size="medium" type="info">Info</sl-tag>
<sl-tag size="medium" type="warning">Warning</sl-tag>
<sl-tag size="medium" type="danger">Danger</sl-tag>

<br><br>

<sl-tag size="large" type="primary">Primary</sl-tag>
<sl-tag size="large" type="success">Success</sl-tag>
<sl-tag size="large" type="info">Info</sl-tag>
<sl-tag size="large" type="warning">Warning</sl-tag>
<sl-tag size="large" type="danger">Danger</sl-tag>

Pill

Use the pill prop to give tabs rounded edges.

<sl-tag type="primary" size="small" pill>Primary</sl-tag>
<sl-tag type="success" size="small" pill>Success</sl-tag>
<sl-tag type="info" size="small" pill>Info</sl-tag>
<sl-tag type="warning" size="small" pill>Warning</sl-tag>
<sl-tag type="danger" size="small" pill>Danger</sl-tag>

<br><br>

<sl-tag size="medium" type="primary" pill>Primary</sl-tag>
<sl-tag size="medium" type="success" pill>Success</sl-tag>
<sl-tag size="medium" type="info" pill>Info</sl-tag>
<sl-tag size="medium" type="warning" pill>Warning</sl-tag>
<sl-tag size="medium" type="danger" pill>Danger</sl-tag>

<br><br>

<sl-tag size="large" type="primary" pill>Primary</sl-tag>
<sl-tag size="large" type="success" pill>Success</sl-tag>
<sl-tag size="large" type="info" pill>Info</sl-tag>
<sl-tag size="large" type="warning" pill>Warning</sl-tag>
<sl-tag size="large" type="danger" pill>Danger</sl-tag>

Removable

Use the removable attribute to add a remove button to the tag.

<sl-tag type="primary" size="small" removable>Primary</sl-tag>
<sl-tag type="success" size="small" removable>Success</sl-tag>
<sl-tag type="info" size="small" removable>Info</sl-tag>
<sl-tag type="warning" size="small" removable>Warning</sl-tag>
<sl-tag type="danger" size="small" removable>Danger</sl-tag>

<br><br>

<sl-tag size="medium" type="primary" removable>Primary</sl-tag>
<sl-tag size="medium" type="success" removable>Success</sl-tag>
<sl-tag size="medium" type="info" removable>Info</sl-tag>
<sl-tag size="medium" type="warning" removable>Warning</sl-tag>
<sl-tag size="medium" type="danger" removable>Danger</sl-tag>

<br><br>

<sl-tag size="large" type="primary" removable>Primary</sl-tag>
<sl-tag size="large" type="success" removable>Success</sl-tag>
<sl-tag size="large" type="info" removable>Info</sl-tag>
<sl-tag size="large" type="warning" removable>Warning</sl-tag>
<sl-tag size="large" type="danger" removable>Danger</sl-tag>

[component-metadata:sl-tag]