Button | NativeBase


Show Code
Playground
const Example = () => {
  return <Button shadow={2} onPress={() => console.log("hello world")}>
      Click me
    </Button>;
};const Example = () => {
  return <Button shadow={2} onPress={() => console.log("hello world")}>
      Click me
    </Button>;
};

Import

Copy
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.

Examples

Basic


Playground
const Example = () => {
  return <Box alignItems="center">
      <Button onPress={() => console.log("hello world")}>Click Me</Button>
    </Box>;
};const Example = () => {
  return <Box alignItems="center">
      <Button onPress={() => console.log("hello world")}>Click Me</Button>
    </Box>;
};

Sizes


Playground
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 <VStack space={4} alignItems="center">
      {["xs", "sm", "md", "lg"].map(size => <Button key={size} size={size}>
          BUTTON
        </Button>)}
    </VStack>;
};

Variants


Playground
const Example = () => {
  return <ScrollView showsVerticalScrollIndicator={false} px="3">
      <VStack w="100%" space={4} px="2" mt="4" alignItems="center" justifyContent="center">
        {
        /* Solid */
      }
        <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>

        {
        /* Subtle */
      }
        <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>

        {
        /* Outline */
      }
        <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>

        {
        /* Link */
      }
        <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>

        {
        /* Ghost */
      }
        <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>

        {
        /* Unstyled */
      }
        <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 <ScrollView showsVerticalScrollIndicator={false} px="3">
      <VStack w="100%" space={4} px="2" mt="4" alignItems="center" justifyContent="center">
        {
        /* Solid */
      }
        <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>

        {
        /* Subtle */
      }
        <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>

        {
        /* Outline */
      }
        <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>

        {
        /* Link */
      }
        <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>

        {
        /* Ghost */
      }
        <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>

        {
        /* Unstyled */
      }
        <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>;
};


Playground
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={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>;
};

Icons


Playground
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>;
};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>;
};

ButtonGroup

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.


Playground
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 = () => {
  return <Button.Group isAttached colorScheme="blue" mx={{
    base: "auto",
    md: 0
  }} size="sm">
      <Button>Edit</Button>
      <Button variant="outline">Save</Button>
    </Button.Group>;
};

Basic (With Ref)


Playground
const Example = () => {
  const myRef = React.useRef({});
  React.useEffect(() => {
    const styleObj = {
      backgroundColor: "#facc15",
      borderColor: "#CA8A04",
      borderWidth: 1,
      borderRadius: 4
    }; //@ts-ignore

    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>;
};const Example = () => {
  const myRef = React.useRef({});
  React.useEffect(() => {
    const styleObj = {
      backgroundColor: "#facc15",
      borderColor: "#CA8A04",
      borderWidth: 1,
      borderRadius: 4
    }; //@ts-ignore

    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>;
};

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: any

Default: 'primary'

variant

The variant of the button style to use.

Type: any

Default: 'solid'

isLoading

If true, the button will show a spinner.

Type: any

isHovered

If true, the button will be in hovered state.

Type: any

isPressed

If true, the button will be in pressed state.

Type: any

isFocused

If true, the button will be focused.

Type: any

isFocusVisible

If true, the button focus ring will be visible.

Type: any

size

The size of the button.

Type: any

startIcon

The start icon element to use in the button.

Type: any

endIcon

The end icon element to use in the button.

Type: any

isLoadingText

The end icon element to use in the button.

Type: any

spinner

The spinner element to use when isLoading is set to true.

Type: any

isDisabled

If true, the button will be disabled.

Type: any

_text

Props to style the child text For providing props to Text inside Box

Type: any

_stack

Props to be passed to the HStack used inside of Button.

Type: any

_icon

Props to be passed to the Icon used inside of Button.

Type: any

spinnerPlacement

Prop to decide placement of spinner.

Type: any

Default: start

_loading

Props to be passed to the button when isLoading is true.

Type: any

_disabled

Props to be passed to the button when button is disabled.

Type: any

_spinner

Props to be passed to the spinner when isLoading is true.

Type: any

_hover

Props to be passed to the button when button is hovered.

Type: any

_pressed

Props to be passed to the button when button is pressed.

Type: any

_focus

Props to be passed to the button when button is focused.

Type: any

rightIcon

The right icon element to use in the button.

Type: any

leftIcon

The left icon element to use in the button.

Type: any

ButtonGroup

ButtonGroup implements

direction

The direction of the Stack Items.

Type: "row" | "column"

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" | "unstyled" | "solid" | "ghost" | "outline"

Default: 'solid'

size

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 & {})>

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. Checkout the default theme of button