Buttons allow users to take actions, and make choices, with a single tap. They communicate actions that users can perform and are typically placed in UI layouts.
import { Button } from '@ui-kitten/components';
import React from 'react';
import { Button } from '@ui-kitten/components';
export const ButtonExample = () => (
<Button onPress={() => console.log('Pressed')}>
BUTTON
</Button>
);
Appearances
Buttons support three appearances: filled (default), outline, and ghost.
<Button appearance='filled'>FILLED</Button>
<Button status='primary'>PRIMARY</Button>
<Button status='success'>SUCCESS</Button>
<Button status='info'>INFO</Button>
<Button status='warning'>WARNING</Button>
<Button status='danger'>DANGER</Button>
<Button status='basic'>BASIC</Button>
<Button status='control'>CONTROL</Button>
Use control status when displaying buttons on high-contrast backgrounds.
tiny, small, medium (default), large, and giant.
<Button size='tiny'>TINY</Button>
<Button size='small'>SMALL</Button>
<Button size='medium'>MEDIUM</Button>
<Button size='large'>LARGE</Button>
<Button size='giant'>GIANT</Button>
Accessories
Buttons can display icons or images on the left or right side using accessoryLeft and accessoryRight props.
import { Button, Icon } from '@ui-kitten/components';
const StarIcon = (props) => (
<Icon {...props} name='star' />
);
const ArrowIcon = (props) => (
<Icon {...props} name='arrow-forward' />
);
export const ButtonWithAccessories = () => (
<>
<Button accessoryLeft={StarIcon}>LEFT ICON</Button>
<Button accessoryRight={ArrowIcon}>RIGHT ICON</Button>
<Button
accessoryLeft={StarIcon}
accessoryRight={ArrowIcon}
>
BOTH ICONS
</Button>
</>
);
<Button disabled>DISABLED BUTTON</Button>
Custom Styling
Buttons can be customized using the style prop or by passing function components for children.
import { Button, Text } from '@ui-kitten/components';
<Button style={{ borderRadius: 20 }}>
{evaProps => <Text {...evaProps}>CUSTOM BUTTON</Text>}
</Button>
children
RenderProp<TextProps> | React.ReactText
String, number or a function component to render within the button. If it is a function, expected to return a Text component.
appearance
'filled' | 'outline' | 'ghost'
default:"filled"
Appearance of the button.
status
EvaStatus
default:"primary"
Status of the component. Can be basic, primary, success, info, warning, danger or control.
Size of the button. Can be tiny, small, medium, large, or giant.
accessoryLeft
RenderProp<Partial<ImageProps>>
Function component to render to the start of the text. Expected to return an Image or Icon.
accessoryRight
RenderProp<Partial<ImageProps>>
Function component to render to the end of the text. Expected to return an Image or Icon.
Whether the button is disabled.
onPress
(event: GestureResponderEvent) => void
Called when button is pressed.
Customizes the style of the button container.
Form Examples
Submit Button
import React from 'react';
import { Button } from '@ui-kitten/components';
const FormExample = () => {
const [loading, setLoading] = React.useState(false);
const handleSubmit = async () => {
setLoading(true);
// Submit form logic
await submitForm();
setLoading(false);
};
return (
<Button
onPress={handleSubmit}
disabled={loading}
>
{loading ? 'SUBMITTING...' : 'SUBMIT'}
</Button>
);
};
Action Buttons
import React from 'react';
import { Button, Layout } from '@ui-kitten/components';
const ActionButtons = ({ onSave, onCancel }) => (
<Layout style={{ flexDirection: 'row', gap: 16 }}>
<Button
appearance='outline'
onPress={onCancel}
>
CANCEL
</Button>
<Button
status='success'
onPress={onSave}
>
SAVE
</Button>
</Layout>
);
