Badge | tcpsystems/ui

Try it

Beta

Svelte

<Badge tone="accent">Beta</Badge>

Examples

Tones

Neutral Accent Ready Degraded Failed

Tones.svelte

<script lang="ts">
	import Badge from '@tcpsystems/ui/foundation/Badge';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Cluster>
	<Badge>Neutral</Badge>
	<Badge tone="accent">Accent</Badge>
	<Badge tone="ok">Ready</Badge>
	<Badge tone="warn">Degraded</Badge>
	<Badge tone="danger">Failed</Badge>
</Cluster>

API

Import

import Badge from '@tcpsystems/ui/foundation/Badge';

Prop	Type	Default
`tone?`	`'neutral' \| 'accent' \| 'ok' \| 'warn' \| 'danger' \| 'info'`	`'neutral'`
`children?`	`native`	none

Hook	Kind
`.tcp-badge`	Root class
`data-tone`	Data attribute