Button | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Resources
Disclosure
Others
If you are starting a new project, please try gluestack-ui for better performance and new design.
Button
The Button component is used to trigger an action or event.
Import
Copyimport { Button, ButtonGroup } from 'native-base';
Button : The button component with support for custom icons, spinners, etc.
ButtonGroup : Used to group buttons whose actions are related, with an option to flush them together.
Examples
Basic
Playgroundconst Example = () => {return <Button onPress={() => console.log("hello world")}>PRIMARY</Button>;};
Sizes
Playgroundconst Example = () => {return <Stack direction={{base: "column",md: "row"}} space={1} alignItems={{base: "center",md: "flex-start"}}>{["xs", "sm", "md", "lg"].map(size => <Box>{/* @ts-ignore */}<Button key={size} size={size}>BUTTON</Button></Box>)}</Stack>;};
Variants
Playgroundconst Example = () => {return <VStack space={4} px={2} w="100%">{/* Solid */}<Heading size="xs" textAlign="left">Solid</Heading><Stack direction={{base: "column",md: "row"}} space={2} mx={{base: "auto",md: 0}}><Button size="sm" onPress={() => console.log("hello world")}>PRIMARY</Button><Button size="sm" colorScheme="secondary" onPress={() => console.log("hello world")}>SECONDARY</Button><Button size="sm" isDisabled onPress={() => console.log("hello world")}>DISABLED</Button></Stack><Divider /><Heading size="xs">Outline</Heading>{/* Outline */}<Stack direction={{base: "column",md: "row"}} space={2} mx={{base: "auto",md: 0}}><Button size="sm" variant="outline" onPress={() => console.log("hello world")}>PRIMARY</Button><Button size="sm" variant="outline" colorScheme="secondary" onPress={() => console.log("hello world")}>SECONDARY</Button><Button size="sm" variant="outline" isDisabled onPress={() => console.log("hello world")}>DISABLED</Button></Stack><Divider /><Heading size="xs">Link</Heading>{/* Link */}<Stack direction={{base: "column",md: "row"}} space={2} mx={{base: "auto",md: 0}}><Button size="sm" variant="link" onPress={() => console.log("hello world")}>PRIMARY</Button><Button size="sm" variant="link" colorScheme="secondary" onPress={() => console.log("hello world")}>SECONDARY</Button><Button size="sm" variant="link" isDisabled onPress={() => console.log("hello world")}>DISABLED</Button></Stack><Divider /><Heading size="xs">Ghost</Heading>{/* Ghost */}<Stack direction={{base: "column",md: "row"}} space={2} mx={{base: "auto",md: 0}}><Button size="sm" variant="ghost" onPress={() => console.log("hello world")}>PRIMARY</Button><Button size="sm" variant="ghost" colorScheme="secondary" onPress={() => console.log("hello world")}>SECONDARY</Button><Button size="sm" variant="ghost" isDisabled onPress={() => console.log("hello world")}>DISABLED</Button></Stack><Divider /><Heading size="xs">Unstyled</Heading>{/* Unstyled */}<Stack direction={{base: "column",md: "row"}} space={2} mx={{base: "auto",md: 0}}><Button variant="unstyled" onPress={() => console.log("hello world")}>Unstyled</Button></Stack></VStack>;};
Loading
Playgroundconst Example = () => {return <Stack direction={{base: "column",md: "row"}} space={2} alignItems={{base: "center",md: "flex-start"}}><Button isLoading>Button</Button><Button isLoading isLoadingText="Submitting">BUTTON</Button><Button isLoading isLoadingText="Submitting" variant="outline">BUTTON</Button></Stack>;};
Icons
Playgroundconst Example = () => {return <Stack direction={{base: "column",md: "row"}} space={4}><Button startIcon={<Icon as={MaterialCommunityIcons} name="email" size={5} />}></Button><Button variant="outline" endIcon={<Icon as={Ionicons} name="arrow-forward" size={4} />}>Call us</Button></Stack>;};
ButtonGroup
Playgroundconst Example = () => {return <Button.Group variant="solid" isAttached space={6} mx={{base: "auto",md: 0}}><Button colorScheme="teal" mr={2}>Save</Button><Button colorScheme="danger" _text={{color: "white"}}>Cancel</Button></Button.Group>;};
Basic (With Ref)
Playgroundconst Example = () => {const myRef = React.useRef({});React.useEffect(() => {myRef.current.setNativeProps({borderWidth: 10,opacity: 0.5,borderRadius: 10});}, [myRef]);return <Button size="sm" variant={"solid"} ref={myRef}>BUTTON</Button>;};
Props
Button
Button implements , , , , , , , , , , , , , , ,
colorScheme
The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
Type: string
Default: 'primary'
variant
The variant of the button style to use.
Type: ResponsiveValue<"link" | "outline" | "ghost" | "solid" | "unstyled">
Default: 'solid'
isLoading
If true, the button will show a spinner.
Type: any
size
The size of the button.
Type: ResponsiveValue<"xs" | "sm" | "md" | "lg">
startIcon
The start icon element to use in the button.
Type: Element | Element[]
endIcon
The end icon element to use in the button.
Type: Element | Element[]
isLoadingText
The end icon element to use in the button.
Type: string
spinner
The spinner element to use when isLoading is set to true.
Type: Element
isDisabled
If true, the button will be disabled.
Type: boolean
_text
Props to style the child text For providing props to Text inside Box
Type:
_stack
Props to be passed to the HStack used inside of Button.
Type:
ButtonGroup
ButtonGroup implements , , , , , , , , , , , , ,
direction
The direction of the Stack Items.
Type: "column" | "row"
Default: row
children
Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element.
Type: Element | Element[]
variant
The variant of the button style to use.
Type: "link" | "ghost" | "outline" | "solid" | "unstyled"
Default: 'solid'
size
The start icon element to use in the button.
Type: "xs" | "sm" | "md" | "lg"
colorScheme
The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
Type: string
Default: 'primary'
isDisabled
If true, the button will be disabled.
Type: boolean
isAttached
If true, button will be atttached together.
Type: boolean
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the button.
Info: We can easily extend the button component theme using extendTheme function as described in the documentation .
Accessibility
Button has role set to .
When Button has focus, Space or Enter activates it.
MadeWithNativeBase
gluestack-ui