Badge
Badge is a view that displays a badge, typically used to show counts, status, or labels. Badges are commonly used in navigation items, buttons, and list items.
Badge is a view that displays a badge, typically used to show counts, status, or labels. Badges are commonly used in navigation items, buttons, and list items.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<Badge>5</Badge>Variants
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<HStack spacing={10}>
<Text>Default:</Text>
<Badge>5</Badge>
</HStack>
<HStack spacing={10}>
<Text>Primary:</Text>
<Badge variant="primary">12</Badge>
</HStack>
<HStack spacing={10}>
<Text>Success:</Text>
<Badge variant="success">New</Badge>
</HStack>
<HStack spacing={10}>
<Text>Warning:</Text>
<Badge variant="warning">!</Badge>
</HStack>
<HStack spacing={10}>
<Text>Error:</Text>
<Badge variant="error">99+</Badge>
</HStack>
</VStack>API
| Prop | Type | Required | Description |
|---|---|---|---|
children | ReactNode | Yes | Badge content (text or number) |
variant | 'default' | 'primary' | 'success' | 'warning' | 'error' | No | Badge style variant Default: 'default' |
style | IBaseComponent['style'] | No | Custom CSS style (overrides variant) |
Inherits additional props from Omit<IBaseComponent, 'style'>.
Overview
Badge is a view that displays a badge, typically used to show counts, status, or labels. Badges are commonly used in navigation items, buttons, and list items.
SwiftUI Correspondence: Similar to SwiftUI's badge() modifier.
Variants
Badge supports different visual variants:
Notes
- Badge displays a small label or count
- Badge supports different variants (primary, success, warning, error)
- Badge can contain text or numbers
- Badge is commonly used with navigation items and buttons
- Custom styles can be applied via the
styleprop
Best Practices
- Counts: Use badges to display notification counts
- Status: Use variant colors to indicate status
- Size: Keep badge content concise
- Placement: Place badges in consistent locations
- Accessibility: Provide appropriate labels for screen readers
AsyncImage
AsyncImage loads remote images and exposes simple loading and failure phases, aligned with SwiftUI's `AsyncImage` mental model.
Button
Button maps directly to SwiftUI's `Button` control: a label or icon triggers an action when activated. The React version keeps the same mental model while exposing standard HTML button behavior.