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

Small

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

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

Primary

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

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

Full

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

<Box display="flex" justifyContent="space-evenly" width="100%">
  <Button full>Find an activity</Button>
</Box><Box display="flex" justifyContent="space-evenly" width="100%">
  <Button full>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} inverted>Find an activity</Button>
</Box><Box display="flex" justifyContent="space-evenly" width="100%">
  <Button icon={Booking}>Find an activity</Button>
  <Button icon={Booking} inverted>Find an activity</Button>
</Box>

With Loading

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

render(() => {
  const [loading, setLoading] = useState(true);
  const onChange = () => setLoading(!loading);

  return (
    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="start" width="auto" gap="medium">
      <Box>
        <Text>Loading</Text>
        <Checkbox.Switch checked={loading} onChange={onChange} />
      </Box>

      <Box display="flex" gap="medium">
        <Button isLoading={loading}>Find an activity</Button>
        <Button icon={Booking} isLoading={loading}>Find an activity</Button>
      </Box>
    </Box>
  );
});render(() => {
  const [loading, setLoading] = useState(true);
  const onChange = () => setLoading(!loading);

  return (
    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="start" width="auto" gap="medium">
      <Box>
        <Text>Loading</Text>
        <Checkbox.Switch checked={loading} onChange={onChange} />
      </Box>

      <Box display="flex" gap="medium">
        <Button isLoading={loading}>Find an activity</Button>
        <Button icon={Booking} isLoading={loading}>Find an activity</Button>
      </Box>
    </Box>
  );
});

Inverted

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

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

Disabled

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

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

Props

Prop	Description	Type	Default	Required