The Button component triggers an event or an action. Examples can be submitting forms and deleting a data point.
const Example = () => {
return <Button shadow={2} onPress={() => console.log("hello world")}>
Click me
</Button>;
};
import { Button } from "native-base";
Button : The button component with support for custom icons, spinners, etc.
Button.Group : Used to group buttons whose actions are related, with an option to flush them together.
const Example = () => {
return <Box alignItems="center">
<Button onPress={() => console.log("hello world")}>Click Me</Button>
</Box>;
};
const Example = () => {
return <VStack space={4} alignItems="center">
{["xs", "sm", "md", "lg"].map(size => <Button key={size} size={size}>
BUTTON
</Button>)}
</VStack>;
};
const Example = () => {
return <ScrollView showsVerticalScrollIndicator={false} px="3">
<VStack w="100%" space={4} px="2" mt="4" alignItems="center" justifyContent="center">
{
}
<Heading size="md">Solid</Heading>
<Stack mb="2.5" mt="1.5" direction={{
base: "column",
md: "row"
}} space={2} mx={{
base: "auto",
md: "0"
}}>
<Button size="sm">PRIMARY</Button>
<Button size="sm" colorScheme="secondary">
SECONDARY
</Button>
<Button size="sm" isDisabled>
DISABLED
</Button>
</Stack>
<Divider w="100%" />
<Heading size="md">Subtle</Heading>
{
}
<Stack mb="2.5" mt="1.5" direction={{
base: "column",
md: "row"
}} space={2} mx={{
base: "auto",
md: "0"
}}>
<Button size="sm" variant="subtle">
PRIMARY
</Button>
<Button size="sm" variant="subtle" colorScheme="secondary">
SECONDARY
</Button>
<Button size="sm" variant="subtle" isDisabled>
DISABLED
</Button>
</Stack>
<Divider />
<Heading size="md">Outline</Heading>
{
}
<Stack mb="2.5" mt="1.5" direction={{
base: "column",
md: "row"
}} space={2} mx={{
base: "auto",
md: "0"
}}>
<Button size="sm" variant="outline">
PRIMARY
</Button>
<Button size="sm" variant="outline" colorScheme="secondary">
SECONDARY
</Button>
<Button size="sm" variant="outline" isDisabled>
DISABLED
</Button>
</Stack>
<Divider w="100%" />
<Heading size="md">Link</Heading>
{
}
<Stack mb="2.5" mt="1.5" direction={{
base: "column",
md: "row"
}} space={2} mx={{
base: "auto",
md: "0"
}}>
<Button size="sm" variant="link">
PRIMARY
</Button>
<Button size="sm" variant="link" colorScheme="secondary">
SECONDARY
</Button>
<Button size="sm" variant="link" isDisabled>
DISABLED
</Button>
</Stack>
<Divider w="100%" />
<Heading size="md">Ghost</Heading>
{
}
<Stack mb="2.5" mt="1.5" direction={{
base: "column",
md: "row"
}} space={2} mx={{
base: "auto",
md: "0"
}}>
<Button size="sm" variant="ghost">
PRIMARY
</Button>
<Button size="sm" variant="ghost" colorScheme="secondary">
SECONDARY
</Button>
<Button size="sm" variant="ghost" isDisabled>
DISABLED
</Button>
</Stack>
<Divider w="100%" />
<Heading size="md">Unstyled</Heading>
{
}
<Stack mb="2.5" mt="1.5" direction={{
base: "column",
md: "row"
}} space={2} mx={{
base: "auto",
md: "0"
}}>
<Button variant="unstyled">Unstyled</Button>
</Stack>
</VStack>
</ScrollView>;
};
const 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 spinnerPlacement="end" isLoadingText="Submitting">
Button
</Button>
<Button isLoading _loading={{
bg: "amber.400:alpha.70",
_text: {
color: "coolGray.700"
}
}} _spinner={{
color: "white"
}} isLoadingText="Submitting">
Button
</Button>
<Button isLoading isLoadingText="Submitting" variant="outline">
Button
</Button>
</Stack>;
};
const Example = () => {
return <Stack direction={{
base: "column",
md: "row"
}} space={4}>
<Button leftIcon={<Icon as={Ionicons} name="cloud-upload-outline" size="sm" />}>
Upload
</Button>
<Button variant="subtle" endIcon={<Icon as={Ionicons} name="cloud-download-outline" size="sm" />}>
Download
</Button>
</Stack>;
};
When you use the ButtonGroup component, it allows you to:
Set some common properties such as size & colorSchemes of all buttons within it.
Add spacing between the buttons.
Flush the buttons together by removing the border radius of the its children as needed.
const Example = () => {
return <Button.Group isAttached colorScheme="blue" mx={{
base: "auto",
md: 0
}} size="sm">
<Button>Edit</Button>
<Button variant="outline">Save</Button>
</Button.Group>;
};
const Example = () => {
const myRef = React.useRef({});
React.useEffect(() => {
const styleObj = {
backgroundColor: "#facc15",
borderColor: "#CA8A04",
borderWidth: 1,
borderRadius: 4
};
myRef.current.setNativeProps({
style: styleObj
});
}, [myRef]);
return <Box alignItems="center">
<Button size="sm" variant={"solid"} _text={{
color: "#1F2937"
}} ref={myRef} px="3">
Send
</Button>
</Box>;
};
Button implements
,
,
,
,
,
,
,
,
,
,
ButtonGroup implements
,
,
,
,
,
,
,
,
,
The direction of the Stack Items.
Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element.
Type: Element | Element[]
The variant of the button style to use.
Type: "link" | "unstyled" | "solid" | "ghost" | "outline"
The start icon element to use in the button.
Type: ResponsiveValue<number | "full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | "lg" | "1" | "2xl" | "2.5" | "1.5" | "10" | "20" | "64" | ... 27 more ... | (string & {})>
The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
If true, the button will be disabled.
If true, button will be atttached together.
NativeBase ships with a default theme for each component. Checkout the default theme of button
.
Info:
We can easily extend the button component theme using extendTheme function as described in the documentation .When Button has focus, Space or Enter activates it.
