Tag

A compact label element for categorizing or labelling items.

Anatomy

<script>
  import { Tag } from "@saas-ui/svelte/components/tag";
</script>

<Tag>Label</Tag>

<!-- With close button -->
<Tag closable onClose={() => console.log("closed")}>
  Closable
</Tag>

Examples

As Button Accessibility

Wrap tag in a button element for clickable tags.

<button class="contents">
	<Tag variant="solid" endIcon={Check}>Fish</Tag>
</button>

Avatar Accessibility

Use the startAvatar prop to add an avatar.

<HStack gap={2} align="center">
	<Tag
		size="sm"
		startAvatar={{
			src: "https://api.dicebear.com/9.x/shapes/svg?seed=emily",
			name: "Emily",
		}}
	>
		Emily (sm)
	</Tag>
	<Tag
		size="md"
		startAvatar={{
			src: "https://api.dicebear.com/9.x/shapes/svg?seed=emily",
			name: "Emily",
		}}
	>
		Emily (md)
	</Tag>
	<Tag
		size="lg"
		startAvatar={{
			src: "https://api.dicebear.com/9.x/shapes/svg?seed=emily",
			name: "Emily",
		}}
	>
		Emily (lg)
	</Tag>
	<Tag
		size="xl"
		startAvatar={{
			src: "https://api.dicebear.com/9.x/shapes/svg?seed=emily",
			name: "Emily",
		}}
	>
		Emily (xl)
	</Tag>
</HStack>

Basic Accessibility

Basic tag with default styling.

<Tag>Tag</Tag>

Closable Accessibility

Use the closable prop to add a close button.

<HStack gap={2}>
	<Tag closable onClose={() => console.log("Close Tag 1")}>Tag 1</Tag>
	<Tag closable onClose={() => console.log("Close Tag 2")}>Tag 2</Tag>
</HStack>

Colours Accessibility

Use the colour prop to change the colour theme.

<VStack gap={2}>
	{#each colours as colour}
		<HStack gap={10} align="center" class="px-4">
			<Text class="min-w-[8ch]">{colour}</Text>
			<Tag {colour} size="sm">Content</Tag>
			<Tag {colour} size="sm" startIcon={Plus}>Content</Tag>
			<Tag {colour} size="sm" variant="solid" closable>Content</Tag>
		</HStack>
	{/each}
</VStack>

Overflow Accessibility

Use the maxWidth prop to truncate long content.

<Tag colour="blue" size="sm" maxWidth="200px" closable>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
	molestias, laboriosam, quod, quia quidem quae voluptatem natus
	exercitationem autem quibusdam
</Tag>

Sizes Accessibility

Use the size prop to change the size of the tag.

<VStack gap={2}>
	{#each tagSizes as size}
		<HStack gap={10} align="center" class="px-4">
			<Text class="min-w-[8ch]">{size}</Text>
			<Tag {size}>Gray</Tag>
			<Tag {size} closable>Gray</Tag>
			<Tag {size} endIcon={Check}>Gray</Tag>
		</HStack>
	{/each}
</VStack>

Variants Accessibility

Use the variant prop to change the visual style.

<VStack gap={4}>
	{#each tagVariants as variant}
		<HStack gap={2}>
			<Tag {variant}>Gray</Tag>
			<Tag {variant} closable>Gray</Tag>
		</HStack>
	{/each}
</VStack>

Props

Prop	Type	Default	Description
`variant`	`subtle \| solid \| outline \| surface`	`surface`	The visual style of the tag.
`size`	`sm \| md \| lg \| xl`	`md`	The size of the tag.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	-	The colour theme of the tag.
`closable`	`boolean`	`false`	Whether the tag is closable.
`maxWidth`	`text`	-	Maximum width of the tag. Content exceeding this width will be truncated.
`class`	`text`	-	CSS class to apply to the component.