Button
A button initiates an instantaneous action.
Button is a Pressable that styles whatever it wraps — it takes no
title. Put a Text inside it, and an Icon alongside that when the action
benefits from a glyph. Everything below is composition rather than props.
Import
import { Button } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
variant | primary · secondary · tonal · plain | "primary" | Emphasis, descending. One primary per screen; plain is a link that happens to be a button. |
size | none · sm · md · lg · icon | "md" | sm is 15px text, md and lg are both 17px and differ only in padding. icon squares it for a glyph; none strips both padding and text sizing, so the label falls back to the ambient Text scale. |
disabled | boolean | false | Blocks press and drops opacity. It does not change the variant, so a disabled primary still reads as the main action. |
children | — | — | Whatever the button wraps — there is no title prop. A Text, optionally preceded by an Icon. |
onPress | — | — | Standard Pressable handler. Button adds styling only; it does not debounce or guard against double taps. |
Examples
Variants
All four variants, in descending order of emphasis.
Sizes
sm shrinks the label to 15px; md and lg share the same 17px label and
differ only in padding. none strips both, so the button collapses to its
label at the ambient Text size — an escape hatch for matching a surrounding
layout exactly, not a size to reach for.
With Icon
An Icon before the label. Size it against the label rather than letting it
inherit the icon default, and give it the variant's foreground colour —
primary inverts, the rest do not.
Icon Only
size="icon" drops the label entirely and squares the padding. The glyph
carries the whole meaning, so it needs an accessibilityLabel.
Loading
Disabled
Disabled in every variant — the contrast drop differs per variant.