Buttons

Buttons are additionally styled TouchableOpacity components.

API

Props

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
  • dark: 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="dark">
  <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="dark">
  <Icon name="add-event" />
  <Text>ADD TO CALENDAR</Text>
</Button>

Button / Fixed size

Button / Fixed size example

JSX Declaration

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

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

Button / Full width

Button / Full width example

JSX Declaration

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

Button / Navbar

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 - Normal

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 (Feed)

Button / Full width - Active (Feed) 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>