Button.md

button-def-headref

Button

Button is a pure NativeBase component.
Buttons are the integral part of an application. They are used for various purposes like, submit or reset a form, navigate, performing interactive actions such as showing or hiding something in an app on click of the button, etc.

Note: Always import and use Text from NativeBase with Buttons.

Contents:

• Button Theme
• Transparent Button
• Outline Button
• Rounded Button
• Block Button
• Full Button
• Icon Button
• Button Size
• Disabled Button

Syntax {% codetabs name="Basic", type="js" -%} import React, { Component } from 'react'; import { Container, Header, Content, Button, Text } from 'native-base'; export default class ButtonExample extends Component { render() { return (

// NativeBase default style Click Me! ); } } {%- language name="Advanced", type="js" -%} import React, { Component } from 'react'; import { Container, Header, Content, Button, Text } from 'native-base'; export default class ButtonExample extends Component { render() { return ( // NativeBase default style Click Me! ); } } {%- endcodetabs %}

• Supports React Native app on both iOS and Android devices.
• Button component takes input such as: Text, Icon, Text with Icon.
• NativeBase gives you privilege to customize the props of this component.
  Example: To have custom style for button, include them in style prop of button.
• Intakes user-defined styles.
• You can change the default button text case(in Android) from variables file after ejecting.
• NativeBase has provided its users with enormous list of props that can be used with Button.
• Replacing Component:
  • React Native TouchableOpacity for iOS
  • React Native TouchableNativeFeedback for Android

**Configuration**

Property	Default	Option	Description
active	-	boolean	State of button
transparent	true	boolean	Renders child element of button
bordered	-	-	Applies outline button style
rounded	-	-	Renders button with slightly round shaped edges
block	-	-	Block level button
full	-	-	Full width button
disabled	true	boolean	Disables click option for button
small	-	-	Small size button
large	-	-	Large size button
iconRight	-	-	Right padding for the icon
iconLeft	-	-	Left padding for the icon
light	-	boolean	Light white background color for button
primary	-	boolean	Blue background color for button
success	-	boolean	Green background color for button
info	-	boolean	Light blue background color for button
warning	-	boolean	Yellow background color for button
danger	-	boolean	Red background color for button
dark	-	boolean	Black background color for button