Buttons

Buttons are additionally styled TouchableOpacity components.

API

Props

Button has no specific (custom) Props, however, it supports every prop that the standard React Native TouchableOpacity component supports. For full list of available props, visit React Native TouchableOpacity component documentation.

Style names

  • action: increases fontSize for Text component within Button
  • border: applies Border color as defined in Theme
  • clear: removes the border around Button and sets backgroundColor to Clear color as defined in Theme
  • confirmation: sets the border around Button and applies a medium margin around
  • secondary: sets the text color to Light as defined in Theme, and background color to Darker as defined in Theme
  • full-width: Button stretches to full width of the container
  • muted: sets the opacity of the Icon and Text components within Buttonto 50%
  • stacked: vertically stacks Icon and Text within Button
  • tight: removes the right margin from Icon and Text within Button

Style

  • underlayColor: the color that will show through when the Button is pressed
  • Also, supports every Style prop that the standard React Native View component supports

Examples

Button / Text only / Light

Button / Text only / Light example

JSX Declaration

<Button>
  <Text>CHECK IN HERE</Text>
</Button>

Button / Text only / Dark

Button / Text only / Dark example

JSX Declaration

<Button styleName="secondary">
  <Text>CHECK IN HERE</Text>
</Button>

Button / Icon + Text / Light

Button / Icon + Text / Light example

JSX Declaration

<Button>
  <Icon name="add-event" />
  <Text>ADD TO CALENDAR</Text>
</Button>

Button / Icon + Text / Dark

Button / Icon + Text / Dark example

JSX Declaration

<Button styleName="secondary">
  <Icon name="add-event" />
  <Text>ADD TO CALENDAR</Text>
</Button>

Button / Fixed size

Button / Fixed size example

JSX Declaration

<View styleName="horizontal">
  <Button styleName="confirmation">
    <Text>REMOVE</Text>
  </Button>

  <Button styleName="confirmation secondary">
    <Text>UPDATE</Text>
  </Button>
</View>

Button / Full width

Button / Full width example

JSX Declaration

<Button styleName="full-width">
  <Text>SEE ALL COMMENTS</Text>
</Button>

Icon Button

Button / Navbar example

JSX Declaration

<Button styleName="clear">
  <Icon name="add-to-favorites-full" />
</Button>

Button / Vertical / Icon + Text

Button / Vertical / Icon + Text example

JSX Declaration

<Button styleName="stacked clear">
  <Icon name="tweet" />
  <Text>Text description</Text>
</Button>

Button / Full width - Muted

Button / Full width - Normal example

JSX Declaration

<View styleName="horizontal flexible">
  <Button styleName="full-width muted">
    <Icon name="like" />
    <Text>LIKE</Text>
  </Button>
  <Button styleName="full-width muted">
    <Icon name="comment-full" />
    <Text>COMMENT</Text>
  </Button>
</View>

Button / Full width - Active

Button / Full width - Active example

JSX Declaration

<View styleName="horizontal flexible">
  <Button styleName="full-width">
    <Icon name="like" />
    <Text>LIKE</Text>
  </Button>
  <Button styleName="full-width">
    <Icon name="comment-full" />
    <Text>COMMENT</Text>
  </Button>
</View>