Button

The Button component allows users to trigger actions. It supports various styles, sizes, loading states, and can be grouped with ButtonGroup.

Installation

$ cbui-cli install @crossbuildui/button

Import

index.tsx
1import { Button, ButtonGroup } from '@/crossbuildui/button'; 2// import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; // If using icons

Button Component

Basic Usage

Provide children (text or ReactNode) and a color prop.

index.tsx
1<Button color="primary">Primary Button</Button> 2<Button color="secondary" style={{marginLeft: 8}}>Secondary Button</Button>

Variants

Buttons support multiple visual variant options: solid (default), faded, bordered, light, flat, ghost, and shadow.

index.tsx
1<View style={{flexDirection: 'row', flexWrap: 'wrap', gap: 8}}> 2 <Button color="primary" variant="solid">Solid</Button> 3 <Button color="primary" variant="faded">Faded</Button> 4 <Button color="primary" variant="bordered">Bordered</Button> 5 <Button color="primary" variant="light">Light</Button> 6 <Button color="primary" variant="flat">Flat</Button> 7 <Button color="primary" variant="ghost">Ghost</Button> 8 <Button color="primary" variant="shadow">Shadow</Button> 9</View>

Sizes

Adjust button size with sm, md (default), or lg.

index.tsx
1<View style={{flexDirection: 'row', alignItems: 'center', gap: 8}}> 2 <Button color="success" size="sm">Small</Button> 3 <Button color="success" size="md">Medium (Default)</Button> 4 <Button color="success" size="lg">Large</Button> 5</View>

Radius

Control the border radius with none, sm, md (default), lg, or full.

index.tsx
1<View style={{flexDirection: 'row', flexWrap: 'wrap', gap: 8}}> 2 <Button color="warning" radius="none">None</Button> 3 <Button color="warning" radius="sm">Small</Button> 4 <Button color="warning" radius="md">Medium (Default)</Button> 5 <Button color="warning" radius="lg">Large</Button> 6 <Button color="warning" radius="full">Full</Button> 7</View>

With Icons

Add icons using startContent or endContent. Use isIconOnly for buttons containing only an icon.

index.tsx
1// Example using hypothetical Icon component 2<View style={{flexDirection: 'row', alignItems: 'center', gap: 8}}> 3 <Button color="danger" startContent={<Icon name="delete" size={18} />}> 4 Delete 5 </Button> 6 <Button color="primary" endContent={<Icon name="send" size={18} />}> 7 Send 8 </Button> 9 <Button color="secondary" isIconOnly> 10 <Icon name="cog" size={20} /> 11 </Button> 12</View>

Loading State

Set isLoading= to display a spinner. You can provide a custom spinner element.

index.tsx
1<Button color="primary" isLoading> 2 Loading... 3</Button> 4 5{/* Example with custom spinner */} 6<Button 7 color="secondary" 8 isLoading 9 spinner={<ActivityIndicator color="white" size="small" />} 10 style={{marginTop: 8}} 11> 12 Processing 13</Button>

Full Width

Make the button span the full width of its parent with fullWidth=.

index.tsx
1<Button color="default" fullWidth> 2 Full Width Button 3</Button>

Disabled State

Disable the button using the disabled prop.

index.tsx
1<Button color="primary" disabled> 2 Disabled Button 3</Button>

ButtonGroup Component

Basic Usage

Group multiple Button components. Props like color, variant, size, and radius can be set on ButtonGroup to apply to all children.

index.tsx
1<ButtonGroup color="primary" variant="solid"> 2 <Button>One</Button> 3 <Button>Two</Button> 4 <Button>Three</Button> 5</ButtonGroup>

Attached Buttons

Use isAttached= to remove spacing between buttons and create a visually connected group. The radius prop on ButtonGroup will then apply to the outer corners of the group. Use isVertical for vertical stacking.

index.tsx
1<ButtonGroup color="secondary" variant="bordered" isAttached radius="md"> 2 <Button>Left</Button> 3 <Button>Middle</Button> 4 <Button>Right</Button> 5</ButtonGroup> 6 7<ButtonGroup color="success" variant="faded" isAttached isVertical radius="lg" style={{marginTop: 10}}> 8 <Button>Top</Button> 9 <Button>Center</Button> 10 <Button>Bottom</Button> 11</ButtonGroup>

Individual Overrides

Props set on individual Button components within a ButtonGroup will override the group's settings.

index.tsx
1<ButtonGroup color="warning" size="lg"> 2 <Button>Large Warn</Button> 3 <Button color="danger" size="sm">Small Danger</Button> 4 <Button>Large Warn</Button> 5</ButtonGroup>

Props Overview

Button Props

PROPTYPEDEFAULTDESCRIPTION
childrenReactNode-Content of the button.
variantButtonVariant'solid'Visual style.
colorButtonColor'default'Semantic color.
sizeButtonSize'md'Size of the button.
radiusButtonRadius'md'Border radius.
fullWidthbooleanfalseTake full parent width.
isLoadingbooleanfalseLoading state.
spinnerReactElement-Custom spinner element.
spinnerPropsActivityIndicatorProps-Props for default spinner.
startContentReactElement-Content before children.
endContentReactElement-Content after children.
isIconOnlybooleanfalseStyle for icon-only button.
styleStyleProp<ViewStyle>-Custom style for the Pressable.
textStyleStyleProp<TextStyle>-Custom style for text children.
disabledbooleanfalseDisable the button.
onPressPressableProps['onPress']-Callback on press.
...PressablePropsvarious-Other props from React Native's Pressable.

ButtonGroup Props

PROPTYPEDEFAULTDESCRIPTION
childrenReactElement<ButtonProps>[]-Button components to group.
variantButtonVariant-Default variant for grouped buttons.
colorButtonColor-Default color for grouped buttons.
sizeButtonSize-Default size for grouped buttons.
radiusButtonRadius-Default radius for grouped buttons (applies to outer corners if attached).
fullWidthbooleanfalseGroup takes full parent width.
isVerticalbooleanfalseStack buttons vertically.
isAttachedbooleanfalseAttach buttons (no space, shared borders).
styleStyleProp<ViewStyle>-Custom style for the group container.

Styling

Customize appearance using:

  • Button:
    • style: Applied to the root Pressable component of the button.
    • textStyle: Applied to the Text component if children is a string.
  • ButtonGroup:
    • style: Applied to the root View container of the group.
    • Individual buttons within a group can also have their own style prop, which will be merged with styles derived from the group (e.g., for attached borders).
index.tsx
1<Button 2 color="primary" 3 variant="solid" 4 style={{ marginVertical: 10, transform: [{ skewX: '-5deg' }] }} // Styles the outer Pressable 5 textStyle={{ fontWeight: 'bold', letterSpacing: 1 }} 6 startContent={<Icon name="star" size={18} />} 7> 8 Styled Button 9</Button> 10 11<ButtonGroup 12 style={{ padding: 10, backgroundColor: '#f0f0f0', borderRadius: 12 }} 13 isAttached 14 radius="lg" 15 color="default" 16> 17 <Button>Grouped Styled 1</Button> 18 <Button style={{borderColor: 'purple', borderWidth: 1}}>Grouped Styled 2</Button> 19</ButtonGroup>

Accessibility

The Button component is built on Pressable and includes accessibility features:

  • accessibilityRole="button" is set by default.
  • accessibilityState includes disabled and busy (when isLoading is true).
  • Ensure meaningful text content or provide an accessibilityLabel for icon-only buttons.
Snippet Checkbox