Button

Web
Native

Reference

Gympass <Button /> component implements all our design guidelines such as default spacings, borders and color pallete tokens. You can use all differente compounds like <Button.Outline /> and <Button.Text /> combining with their props such as small or inverted so the button become the desired variation.

Usage

Default

import { Box, Button } from '@gympass/yoga';

<Box display="flex" justifyContent="space-evenly" width="100%">
  <Button>Find an activity</Button>
  <Button secondary>Find an activity</Button>
</Box><Box display="flex" justifyContent="space-evenly" width="100%">
  <Button>Find an activity</Button>
  <Button secondary>Find an activity</Button>
</Box>

As an anchor

import { Box, Button } from '@gympass/yoga';

<Box display="flex" justifyContent="space-evenly" width="100%">
  <Button href="http://www.gympass.com" target="blank">
    Find an activity (external link)
  </Button>
</Box><Box display="flex" justifyContent="space-evenly" width="100%">
  <Button href="http://www.gympass.com" target="blank">
    Find an activity (external link)
  </Button>
</Box>

With icon

import { Box, Button } from '@gympass/yoga';
import { Booking } from '@gympass/yoga-icons';

<Box display="flex" justifyContent="space-evenly" width="100%">
  <Button icon={Booking}>Find an activity</Button>
  <Button icon={Booking} secondary>
    Find an activity
  </Button>
</Box><Box display="flex" justifyContent="space-evenly" width="100%">
  <Button icon={Booking}>Find an activity</Button>
  <Button icon={Booking} secondary>
    Find an activity
  </Button>
</Box>

Props

Prop	Description	Type	Default	Required
children		node	`Button`	false
disabled		bool	`false`	false
full		bool	`false`	false
inverted		bool	`false`	false
onClick		func	`() => {}`	false
small		bool	`false`	false
secondary		bool	`false`	false
icon	an Icon from yoga-icons package	union	`undefined`	false
href		string	`undefined`	false