code/app/src/routes/book/badges/+page.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script lang="ts">
    import Badge from "$components/badge.svelte";
</script>

<section>
    <h2>Variants</h2>
    <Badge text="default"/>
    <Badge type="blue" text="blue"/>
    <Badge type="green" text="green"/>
    <Badge type="red" text="red"/>
    <Badge type="tame" text="tame"/>
    <Badge type="yellow" text="yellow"/>
    <Badge size="large" text="large"/>
    <Badge text="with dot" withDot type="blue"/>
    <Badge text="removable" removable id="badge-1" on:remove={(e) => alert("removed " + e.detail.id)}/>
    <Badge text="with dot" size="large" withDot type="blue"/>
    <Badge text="removable" removable size="large" id="badge-2" uppercase
           on:remove={(e) => alert("removed " + e.detail.id)}/>
</section>