Button

Displays a button or a component that looks like a button.

Installation

Terminal

npx flexnative-cli add "https://registry.flexnative.com/c/button.json"

Usage

Importing

import { Button } from "@/components/ui/button";

Using

<Button variant="default" label="Default" />

Examples

Default

<Button variant="default" label="Default" />

Secondary

<Button variant="secondary" label="Secondary" />

Destructive

<Button variant="destructive" label="Destructive" />

Outline

<Button variant="outline" label="Outline" />

Ghost

<Button variant="ghost" label="Ghost" />

Icon

<Button icon={<Icon name="home" />} label="With Icon" />

Icon Only

<Button icon={<Ionicons name="add" />} size="icon" />

API

Button

The Button component allows you to create interactive, styled buttons with various variants and sizes.

Prop	Type	Description	Default
`label`	`string`	The text label displayed inside the button.	`undefined`
`icon`	`React.ReactNode`	An icon element displayed alongside the button label or as the only content.	`undefined`
`onPress`	`() => void`	Callback triggered when the button is pressed.	`undefined`
`style`	`StyleProp<ViewStyle>`	Additional styles for the button container.	`undefined`
`labelStyle`	`StyleProp<TextStyle>`	Custom styles for the button label.	`undefined`
`iconStyle`	`StyleProp<ViewStyle>`	Styles applied to the icon container (not the icon itself).	`undefined`
`variant`	`default`, `secondary`, `destructive`, `ghost`, `outline`	Determines the visual style of the button.	`'default'`
`size`	`default`, `sm`, `lg`, `icon`	Adjusts the size of the button.	`'default'`
`disabled`	`boolean`	Disables the button, making it unclickable and visually indicating its disabled state.	`false`
`accessibilityLabel`	`string`	A label used for screen readers to describe the button.	`undefined`
`testID`	`string`	An identifier for testing purposes.	`undefined`
`...TouchableOpacityProps`	All other `TouchableOpacity` props	Inherits all additional props from `TouchableOpacity`, such as `onPressIn`, `onPressOut`, etc.	—

Variants

Variant	Description
`default`	Standard button with primary colors.
`secondary`	Muted button with secondary styling.
`destructive`	Styled to indicate a destructive action (e.g., delete).
`ghost`	Transparent button with minimal styling, for secondary actions.
`outline`	Transparent button with a border, styled for subtle emphasis.

Sizes

Size	Description
`default`	Standard button size, suitable for most use cases.
`sm`	Smaller button for compact spaces.
`lg`	Larger button for high emphasis.
`icon`	Circular button containing only an icon.

Accessibility

Ensure that your buttons are accessible by providing proper labels, roles, and other attributes.

Prop	Type	Description	Default
`accessibilityLabel`	`string`	A descriptive label used by screen readers to explain the button's purpose or action.	`undefined`
`accessibilityRole`	`'button'`	Identifies the element as a button for accessibility tools (automatically set to `'button'`).	`'button'`
`disabled`	`boolean`	Indicates that the button is disabled, preventing interaction and signaling the state to assistive technologies.	`false`

Best Practices for Accessibility

Provide meaningful labels: Always use accessibilityLabel to describe what the button does, especially for buttons with only icons.
Consistent roles: The accessibilityRole is automatically set to 'button' but can be overridden if needed.
Handle disabled states: Ensure that disabled buttons are visually distinct and announce their state via assistive technologies.

Example

import { Button } from "@/components/ui/button";
import { Ionicons } from "@expo/vector-icons";

<Button 
icon={<Ionicons name="add" />}
size="icon"
accessibilityLabel="Add new item"
onPress={() => console.log('Button pressed')} 
/>