Components

Button

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

AdaptedSwiftUI: Button

Example

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

Default

Loading preview…

Code

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

Defaults to type="button" so clicking does not submit a form accidentally.
Supports native keyboard activation, disabled, aria-*, className, and style.
Use a visible action label, or aria-label for an icon-only button.
Choose buttonStyle="plain", "bordered", or "borderedProminent"; the default "automatic" uses the plain appearance. Use buttonRole="destructive" for a destructive action.

Interactive

Disabled

Prop	Type	Required	Description
`buttonStyle`	`'automatic' \| 'plain' \| 'bordered' \| 'borderedProminent'`	No	SwiftUI-inspired appearance. Automatic is a plain contextual action.
`buttonRole`	`'destructive' \| 'cancel'`	No	Destructive actions use the semantic danger color.

Inherits additional props from IBaseElementComponent<'button'>.

Badge

Display a short count or status beside related content.

Canvas

Canvas exposes the browser's drawing surface with a SwiftUI-style dedicated component wrapper.