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.
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.
Examples
Basic Button
Preview unavailable for this example in the static docs build.
Show code
<Button>Button</Button>Interactive Button
Preview unavailable for this example in the static docs build.
Show code
<Button onClick={() => {
console.log('Button clicked!')
}}>Click Me</Button>Disabled Button
Preview unavailable for this example in the static docs build.
Show code
<Button disabled>Disabled Button</Button>Buttons in Layouts
Preview unavailable for this example in the static docs build.
Show code
<HStack spacing={10}>
<Text>Left</Text>
<Button>Center</Button>
<Text>Right</Text>
</HStack>Buttons in Layouts
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
</VStack>API
This component currently relies on inherited element props.
Inherits additional props from IBaseElementComponent<'button'>.
SwiftUI Alignment
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.
Notes
- Use clear labels that describe the action
- Keep disabled buttons visually distinct
- Use custom styling sparingly so the component stays consistent with the design system