Button — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add button

Or install the whole package and import it

pnpm add orn-ui
import { Button } from 'orn-ui/button';

Depends on:core (theme + icons)

Usage

primary — The main action of a screen — one per view. Submit, confirm, continue.
secondary — A supporting action next to a primary one, when both matter.
outline / ghost — Low-emphasis actions: cancel, dismiss, or repeated actions in a list.
link — Reads as text, not as a control — inline navigation inside a paragraph or footer.
destructive — Deletes or actions that cannot be undone. Pair it with a confirmation.
size — `md` by default. `lg` for a full-width call to action, `sm` inside dense rows or cards.
loading / disabled — Use `loading` while an async action runs, `disabled` when the action is not available yet.

Demo clip not recorded yet — see MEDIA.md

Variants

Primary

<Button title="Primary" onPress={() => {}} />

Secondary

<Button title="Secondary" variant="secondary" onPress={() => {}} />

Outline

<Button title="Outline" variant="outline" onPress={() => {}} />

Ghost

<Button title="Ghost" variant="ghost" onPress={() => {}} />

Link

<Button title="Link" variant="link" onPress={() => {}} />

Destructive

<Button title="Destructive" variant="destructive" onPress={() => {}} />

Sizes

<View style={{ gap: 8 }}>
  <Button title="Small" size="sm" onPress={() => {}} />
  <Button title="Medium (default)" size="md" onPress={() => {}} />
  <Button title="Large" size="lg" onPress={() => {}} />
</View>

Disabled

<Button title="Disabled" disabled onPress={() => {}} />

Loading

<Button
  title="Tap to load"
  loading={loading}
  onPress={() => {
    setLoading(true);
    setTimeout(() => setLoading(false), 1500);
  }}
/>

Left icon

<Button title="Confirm" leftIconName="check" onPress={() => {}} />

Right icon

<Button title="Next" rightIconName="chevron-right" onPress={() => {}} />

Full demo source

const variants: VariantDef[] = [
  { label: 'Primary', content: <Button title="Primary" onPress={() => {}} /> },
  { label: 'Secondary', content: <Button title="Secondary" variant="secondary" onPress={() => {}} /> },
  { label: 'Outline', content: <Button title="Outline" variant="outline" onPress={() => {}} /> },
  { label: 'Ghost', content: <Button title="Ghost" variant="ghost" onPress={() => {}} /> },
  { label: 'Link', content: <Button title="Link" variant="link" onPress={() => {}} /> },
  { label: 'Destructive', content: <Button title="Destructive" variant="destructive" onPress={() => {}} /> },
  {
    label: 'Sizes',
    content: (
      <View style={{ gap: 8 }}>
        <Button title="Small" size="sm" onPress={() => {}} />
        <Button title="Medium (default)" size="md" onPress={() => {}} />
        <Button title="Large" size="lg" onPress={() => {}} />
      </View>
    ),
  },
  { label: 'Disabled', content: <Button title="Disabled" disabled onPress={() => {}} /> },
  {
    label: 'Loading',
    content: (
      <Button
        title="Tap to load"
        loading={loading}
        onPress={() => {
          setLoading(true);
          setTimeout(() => setLoading(false), 1500);
        }}
      />
    ),
  },
  { label: 'Left icon', content: <Button title="Confirm" leftIconName="check" onPress={() => {}} /> },
  { label: 'Right icon', content: <Button title="Next" rightIconName="chevron-right" onPress={() => {}} /> },
];
return <VariantList variants={variants} />;

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`title`	`string`	—	—
`onPress`	`(e: GestureResponderEvent) => void`	—	—
`variant?`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'link' \| 'destructive'`	primary	—
`size?`	`'sm' \| 'md' \| 'lg'`	md	—
`loading?`	`boolean`	false	—
`disabled?`	`boolean`	false	—
`style?`	`StyleProp<ViewStyle>`	—	—
`textStyle?`	`StyleProp<TextStyle>`	—	—
`leftIcon?`	`ReactNode`	—	—
`rightIcon?`	`ReactNode`	—	—
`leftIconName?`	`IconName`	—	—
`rightIconName?`	`IconName`	—	—
`iconColor?`	`string`	—	—
`accessibilityLabel?`	`string`	—	—