Button | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

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

Copy
import { 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


Playground
const Example = () => {
  return <Button onPress={() => console.log("hello world")}>PRIMARY</Button>;
};const Example = () => {
  return <Button onPress={() => console.log("hello world")}>PRIMARY</Button>;
};

Sizes


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


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


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 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 isLoadingText="Submitting" variant="outline">
        BUTTON
      </Button>
    </Stack>;
};

Icons


Playground
const Example = () => {
  return <Stack direction={{
    base: "column",
    md: "row"
  }} space={4}>
      <Button startIcon={<Icon as={MaterialCommunityIcons} name="email" size={5} />}>
        Email
      </Button>
      <Button variant="outline" endIcon={<Icon as={Ionicons} name="arrow-forward" size={4} />}>
        Call us
      </Button>
    </Stack>;
};const Example = () => {
  return <Stack direction={{
    base: "column",
    md: "row"
  }} space={4}>
      <Button startIcon={<Icon as={MaterialCommunityIcons} name="email" size={5} />}>
        Email
      </Button>
      <Button variant="outline" endIcon={<Icon as={Ionicons} name="arrow-forward" size={4} />}>
        Call us
      </Button>
    </Stack>;
};

ButtonGroup


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


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