Skip to main content

Button

Buttons allow users to take actions, and make choices, with a single tap.

import { Button } from "@react-native-material/core";
<Button title="Contained" /><Button variant="outlined" title="Outlined" /><Button variant="text" title="Text" />

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

  • Modal windows
  • Forms
  • Cards
  • Toolbars

💬 Feedback 🎨 Material Design

Coloring#

import { Button } from "@react-native-material/core";
<Button variant="text" title="Button" color="secondary" /><Button title="Button" color="error" /><Button variant="outlined" title="Button" color="#d4ac2d" /><Button title="Button" color="pink" tintColor="red" />

Icon#

import { Button } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Button variant="outlined" title="Delete" leading={props => <Icon name="delete" {...props} />} /><Button title="Send" trailing={props => <Icon name="send" {...props} />} />

Uppercase#

import { Button } from "@react-native-material/core";
<Button title="Button" /><Button title="Button" uppercase={false} />

Disable Elevation#

import { Button } from "@react-native-material/core";
<Button title="Button" /><Button title="Disable Elevation" disableElevation />

Loading#

import { Button } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Button title="Button" leading={props => <Icon name="plus" {...props} />} loading /><Button  title="Button"  trailing={props => <Icon name="plus" {...props} />}  loading  loadingIndicatorPosition="trailing"/><Button title="Button" loading loadingIndicatorPosition="overlay" />

Custom Loading Indicator#

import { Button } from "@react-native-material/core";import { MaterialCommunityIcons as Icon } from "@expo/vector-icons";
<Button  title="Button"  leading={props => <Icon name="plus" {...props} />}  loading  loadingIndicator="⏰"/><Button  title="Custom Text"  loading  loadingIndicator="Loading..."  loadingIndicatorPosition="overlay"/><Button  title="Button"  loading  loadingIndicator={props => (    <Text      style={{        backgroundColor: props.color,        color: "black",        borderRadius: 50,        width: 24,        height: 24,        textAlign: "center",      }}    >      ...    </Text>  )}  loadingIndicatorPosition="overlay"/><Button  title="Button"  trailing={props => <Icon name="plus" {...props} />}  loading  loadingIndicator="⏰"  loadingIndicatorPosition="trailing"/>