Components

Badge

Display a short count or status beside related content.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Badge } from '@swiftuijs/ui';
export default function Example() {
    return (<Badge>5</Badge>);
}

Variants

Badge supports different visual variants:

Usage and limitations

  • Variants are primary, success, warning, and error; content can be text or a number.
  • Keep content short and place it consistently beside the item it describes. Do not communicate status through color alone.
  • Supply an accessible label when the number or icon needs context; customize appearance with style.

More examples

Styles

API reference

PropTypeRequiredDescription
childrenReactNodeYesBadge content (text or number)
variant'default' | 'primary' | 'success' | 'warning' | 'error'NoBadge style variant Default: 'default'
styleIBaseComponent['style']NoCustom CSS style (overrides variant)

Inherits additional props from Omit<IBaseComponent, 'style'>.

Edit this page on GitHubReport an issue

AsyncImage

AsyncImage loads remote images and exposes simple loading and failure phases, aligned with SwiftUI's `AsyncImage` mental model.

Button

A native HTML button with SwiftUI-inspired styling. Pass ordinary button props and an `onClick` handler; use `type="submit"` inside a form.