Badges & Labels
Example :: Labels
Exciting Stale New Deprecated Old Breaking News Cool Fun
<script>
import { Badge } from '@colorfuldots/svelteit'
</script>
<Badge label="Exciting" primary />
<Badge label="Stale" secondary />
<Badge label="New" success />
<Badge label="Deprecated" danger />
<Badge label="Old" warning />
<Badge label="Breaking News" info />
<Badge label="Cool" light />
<Badge label="Fun" dark />
Example :: Outlined Labels
Exciting Stale New Deprecated Old Breaking News Cool Fun
<script>
import { Badge } from '@colorfuldots/svelteit'
</script>
<Badge label="Exciting" primary outlined />
<Badge label="Stale" secondary outlined />
<Badge label="New" success outlined />
<Badge label="Deprecated" danger outlined />
<Badge label="Old" warning outlined />
<Badge label="Breaking News" info outlined />
<Badge label="Cool" light outlined />
<Badge label="Fun" dark outlined />
Example :: Badges
10 20 30 40 50 60 70 80
<script>
import { Badge } from '@colorfuldots/svelteit'
</script>
<Badge badge={10} primary />
<Badge badge={20} secondary />
<Badge badge={30} success />
<Badge badge={40} danger />
<Badge badge={50} warning />
<Badge badge={60} info />
<Badge badge={70} light />
<Badge badge={80} dark />
Example :: Outlined Badges
10 20 30 40 50 60 70 80
<script>
import { Badge } from '@colorfuldots/svelteit'
</script>
<Badge badge={10} primary outlined />
<Badge badge={20} secondary outlined />
<Badge badge={30} success outlined />
<Badge badge={40} danger outlined />
<Badge badge={50} warning outlined />
<Badge badge={60} info outlined />
<Badge badge={70} light outlined />
<Badge badge={80} dark outlined />
API
Coming soon!
Badges & Labels
Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new or unread items. Labels are great for offering counts, tips, or other markup for pages.