Components

Label

Combine a title with an optional icon.

Example

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

Default

Loading preview…

Code
'use client';
import { Label } from '@swiftuijs/ui';
export default function Example() {
    return (<Label icon="🏠" title="Home"></Label>);
}

Variants

Label supports different display variants:

Usage and limitations

  • title is required; icon is optional. Variants are automatic (default), iconOnly, and titleOnly.
  • Spacing and alignment are supplied by the component; choose an icon that matches the title.
  • This renders a visual container, not an HTML label associated with a form input. Label inputs separately; icon-only controls still need an accessible name.

More examples

Icon Only
Title Only

API reference

PropTypeRequiredDescription
iconReactNodeNoLabel icon
titlestringYesLabel text
variant'automatic' | 'iconOnly' | 'titleOnly'NoLabel style variant Default: 'automatic'
styleIBaseComponent['style']NoCustom CSS style (overrides variant)

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

Edit this page on GitHubReport an issue

KeyframeAnimator

KeyframeAnimator steps through explicit frame values over time, exposing each frame to a render function.

LabeledContent

LabeledContent presents a label and related value using the same compact summary pattern as SwiftUI.