Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Button

Button is an interactive component that triggers actions when pressed. It comes with multiple variants to suit different visual hierarchies.

​
Import

import { Button } from 'radix-native-ui';

​
Usage

import { Button } from 'radix-native-ui';

<Button onPress={() => console.log('Pressed!')}>
  Click me
</Button>

​
Props

​
Haptic Feedback

All buttons provide haptic feedback by default when pressed. You can disable this with the hapticFeedback prop: 
<Button hapticFeedback={false}>
  No Haptic
</Button>

​
Variants

​
Classic (Default)

<Button variant="classic">Classic</Button>
Solid background with the accent color. Best for primary actions.

​
Solid

<Button variant="solid">Solid</Button>
Similar to classic but with a slightly different appearance.

​
Soft

<Button variant="soft">Soft</Button>
Subtle background with colored text. Good for secondary actions.

​
Outline

<Button variant="outline">Outline</Button>
Transparent background with colored border. For tertiary actions.

​
Ghost

<Button variant="ghost">Ghost</Button>
No background or border. For minimal visual weight.

​
Sizes

<Button size={1}>Small</Button>
<Button size={2}>Medium (Default)</Button>
<Button size={3}>Large</Button>
<Button size={4}>Extra Large</Button>

​
Colors

<Button color="blue">Blue</Button>
<Button color="green">Green</Button>
<Button color="red">Red</Button>
<Button color="tomato">Tomato</Button>

​
States

​
Disabled

<Button disabled>Disabled</Button>

​
Loading

<Button loading>Loading</Button>

​
High Contrast

<Button highContrast>High Contrast</Button>
<Button variant="soft" highContrast>Soft High Contrast</Button>

​
Examples

​
Primary Action

<Button variant="classic" onPress={handleSubmit}>
  Submit
</Button>

​
Secondary Action

<Flex direction="row" gap={2}>
  <Button variant="soft" onPress={handleCancel}>
    Cancel
  </Button>
  <Button variant="classic" onPress={handleConfirm}>
    Confirm
  </Button>
</Flex>

​
Destructive Action

<Button color="red" onPress={handleDelete}>
  Delete
</Button>

​
Full Width

<Button width="100%" onPress={handleLogin}>
  Sign In
</Button>

​
With Loading State

function SubmitButton() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    await submitForm();
    setLoading(false);
  };

  return (
    <Button loading={loading} onPress={handleSubmit}>
      Submit
    </Button>
  );
}

​
Button Group

<Flex direction="row" gap={2}>
  <Button variant="outline">Back</Button>
  <Button flex={1}>Continue</Button>
</Flex>

​
Accessibility

  • Uses native accessibilityRole="button"
  • Supports accessibilityLabel prop
  • Disabled state is communicated to screen readers
  • Loading state is announced