Button — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add button

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

primary — La acción principal de una pantalla — una por vista. Enviar, confirmar, continuar.
secondary — Una acción de apoyo junto a la principal, cuando ambas importan.
outline / ghost — Acciones de baja jerarquía: cancelar, descartar o acciones repetidas en una lista.
link — Se lee como texto, no como control — navegación dentro de un párrafo o un pie.
destructive — Borrados o acciones sin retorno. Acompañarla siempre con una confirmación.
size — `md` por defecto. `lg` para una llamada a la acción de ancho completo, `sm` dentro de filas o tarjetas densas.
loading / disabled — Usar `loading` mientras corre una acción asíncrona y `disabled` cuando la acción todavía no está disponible.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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={() => {}} />

Código completo del demo

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

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

Nombre	Tipo	Por defecto	Descripción
`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`	—	—