Badge
Badges are used to inform the user of the status of specific data.
Usage
import { Badge } from 'stwui';
import Badge from 'stwui/badge';
default info success warn error
<script lang="ts">
import { Badge } from 'stwui';
</script>
<Badge>default</Badge>
<Badge type="info">info</Badge>
<Badge type="success">success</Badge>
<Badge type="warn">warn</Badge>
<Badge type="error">error</Badge>
With Custom Colors
bg-green-800 bg-blue-800 bg-red-800 bg-amber-800
<script lang="ts">
import { Badge } from 'stwui';
</script>
<Badge class="bg-green-800 text-green-200">bg-green-800</Badge>
<Badge class="bg-blue-800 text-blue-200">bg-blue-800</Badge>
<Badge class="bg-red-800 text-red-200">bg-red-800</Badge>
<Badge class="bg-amber-800 text-amber-200">bg-amber-800</Badge>
Large Large Large Large Large
<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>
With Indicator
Indicator Indicator Indicator Indicator Indicator
<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>
rounded rounded rounded rounded rounded
square square square square square
<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 <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' | undefined | |
| size | 'default' | 'large' | default |
| shape | 'default' | 'rounded' | 'square' | default |
Badge Slots
| indicator | <Badge.Indicator slot="indicator" /> |
| default | |
| close | <Badge.Close slot="close" /> |
Badge Class Identifiers
| stwui-badge |
| stwui-badge-close |
| stwui-badge-indicator |
