Badge

A small label used to highlight an item's status or category for quick recognition.

Anatomy

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

<Badge>Default</Badge>
<Badge variant="solid" colour="green">Success</Badge>
<Badge variant="outline" colour="blue">Info</Badge>
<Badge variant="subtle" colour="red">Error</Badge>

Examples

Basic Accessibility

Basic badge with default styling for simple labeling.

<Badge>Badge</Badge>

Colours Accessibility

Use the colour prop to change the colour of the badge. Supports all standard colour palettes.

<VStack gap={2}>
	{#each colours as colour}
		<HStack gap={4} align="center">
			<Text size="xs" class="w-16">{colour}</Text>
			<Badge {colour} variant="outline">Outline</Badge>
			<Badge {colour} variant="solid">Solid</Badge>
			<Badge {colour} variant="subtle">Subtle</Badge>
			<Badge {colour} variant="surface">Surface</Badge>
		</HStack>
	{/each}
</VStack>

Sizes Accessibility

Use the size prop to change the size of the badge. Available sizes: xs, sm, md, lg.

<HStack align="start" gap={4}>
	{#each badgeSizes as size}
		<VStack gap={2}>
			<Text size="xs">{size}</Text>
			<Badge {size}>New</Badge>
		</VStack>
	{/each}
</HStack>

Variants Accessibility

Use the variant prop to change the visual style. Available variants: subtle, solid, outline, surface.

<HStack align="start" gap={4}>
	{#each badgeVariants as variant}
		<VStack gap={2}>
			<Text size="xs">{variant}</Text>
			<Badge {variant}>Badge</Badge>
		</VStack>
	{/each}
</HStack>

With Icon Accessibility

Badges with icons for added visual context and meaning.

<VStack align="start" gap={2}>
	<Badge variant="solid" colour="blue">
		<Icon as={Star} size="xs" />
		New
	</Badge>
	<Badge variant="solid" colour="green">
		New
		<Icon as={CheckCircle} size="xs" />
	</Badge>
</VStack>

Props

Prop	Type	Default	Description
`variant`	`subtle \| solid \| outline \| surface`	`solid`	The visual style of the component.
`size`	`xs \| sm \| md \| lg`	`sm`	The size of the component.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.