Badge

Badges are used to inform the user of the status of specific data.

Default

Default Default Default Default Default

svelte

<script lang="ts">
	import { Badge } from 'stwui';
</script>

<Badge type="info">Default</Badge>
<Badge type="success">Default</Badge>
<Badge type="warn">Default</Badge>
<Badge type="error">Default</Badge>

Custom

Custom Custom Custom Custom

svelte

<script lang="ts">
	import { Badge } from 'stwui';
</script>

<Badge class="bg-green-800 text-green-200 bg-opacity-100 dark:bg-opacity-100">Custom</Badge>
<Badge class="bg-blue-800 text-blue-200 bg-opacity-100 dark:bg-opacity-100">Custom</Badge>
<Badge class="bg-red-800 text-red-200 bg-opacity-100 dark:bg-opacity-100">Custom</Badge>
<Badge class="bg-amber-800 text-amber-200 bg-opacity-100 dark:bg-opacity-100">Custom</Badge>

Large

Large Large Large Large Large

svelte

<script lang="ts">
	import { Badge } from 'stwui';
</script>

<Badge type="info" size="large">Large</Badge>
<Badge type="success" size="large">Large</Badge>
<Badge type="warn" size="large">Large</Badge>
<Badge type="error" size="large">Large</Badge>

Indicator

Indicator Indicator Indicator Indicator Indicator

svelte

<script lang="ts">
	import { Badge } from 'stwui';
</script>

<Badge type="info">
	<Badge.Indicator slot="indicator" />
	Indicator
</Badge>
<Badge type="success">
	<Badge.Indicator slot="indicator" />
	Indicator
</Badge>
<Badge type="warn"><Badge.Indicator slot="indicator" />
	Indicator
</Badge>
<Badge type="error"><Badge.Indicator slot="indicator" />
	Indicator
</Badge>

Shape

Shape Shape Shape Shape Shape
Shape Shape Shape Shape Shape

svelte

<script lang="ts">
	import { Badge } from 'stwui';
</script>

<Badge type="info" shape="rounded">Shape</Badge>
<Badge type="success" shape="rounded">Shape</Badge>
<Badge type="warn" shape="rounded">Shape</Badge>
<Badge type="error" shape="rounded">Shape</Badge>

<Badge type="info" shape="square">Shape</Badge>
<Badge type="success" shape="square">Shape</Badge>
<Badge type="warn" shape="square">Shape</Badge>
<Badge type="error" shape="square">Shape</Badge>

Close Close Close Close Close

svelte

<script lang="ts">
	import { Badge } from 'stwui';
</script>

<Badge type="info">
	Close
	<Badge.Close
		slot="close"
		on:click={() => console.log('clicked badge close')}
	/>
</Badge>
<Badge type="success">
	Close
	<Badge.Close
		slot="close"
		on:click={() => console.log('clicked badge close')}
	/>
</Badge>
<Badge type="warn">
	Close
	<Badge.Close
		slot="close"
		on:click={() => console.log('clicked badge close')}
	/>
</Badge>
<Badge type="error">
	Close
	<Badge.Close
		slot="close"
		on:click={() => console.log('clicked badge close')}
	/>
</Badge>

Badge Props

type	'info' \| 'warn' \| 'success' \| 'error'
size	'default' \| 'large'	default
shape	'default' \| 'rounded' \| 'square'	default

Badge Slots

indicator	<Badge.Indicator slot="indicator" />
default
close	<Badge.Close slot="close" />