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';

As an anchor

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

With icon

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

Props

PropDescriptionTypeDefaultRequired
childrennodeButtonfalse
disabledboolfalsefalse
fullboolfalsefalse
invertedboolfalsefalse
onClickfunc() => {}false
smallboolfalsefalse
secondaryboolfalsefalse
iconan Icon from yoga-icons packageunionundefinedfalse
hrefstringundefinedfalse
Made with ❤️ by Gympass • github