Button.Text

Web
Native

Primary

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

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

Secondary

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

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

As an anchor

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

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

With icon

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

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

Inverted

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

<Box display="flex" justifyContent="space-evenly" width="100%" bg="stamina" padding="medium">
  <Button.Text inverted>Find an activity</Button.Text>
</Box><Box display="flex" justifyContent="space-evenly" width="100%" bg="stamina" padding="medium">
  <Button.Text inverted>Find an activity</Button.Text>
</Box>

Disabled

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

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

Props

Prop	Description	Type	Default	Required