Badge
Small labels for highlighting status, counts, or categories. Perfect for notifications and tags.
Installation
Import
import { Badge } from '@svelte-atoms/core/badge';Preset Configuration
Customize the badge appearance using presets
You can customize the default styles for Badge components by defining presets in your configuration:
Examples
Explore different badge variations and use cases
Basic Badge
Simple badge component
Default
Code
<Badge>Default</Badge>
Badge Variants
Different styles for various contexts
Default Primary Success Warning Error
Code
<Badge variant="default">Default</Badge> <Badge variant="primary">Primary</Badge> <Badge variant="success">Success</Badge> <Badge variant="warning">Warning</Badge> <Badge variant="error">Error</Badge>
Badge Sizes
Different sizes for various use cases
Small Medium Large
Code
<Badge size="sm">Small</Badge> <Badge size="md">Medium</Badge> <Badge size="lg">Large</Badge>
API Reference
Badge Props
Prop
Type
Default
Description
children
Snippet<[]>
undefined
Children
Accessibility
Built-in Accessibility Features
- • Semantic HTML structure
- • Sufficient color contrast
- • Screen reader friendly text
- • ARIA labels for icons or counts
- • Keyboard accessible when interactive