Button Components

The button styles are defined in Button.styles.js. You can change the variants of the buttons by using different props.

<Button>Primary</Button>

<Button frame>Primary Frame</Button>

<Button size="big">Primary Big</Button>

<Button frame size="big">Primary Frame Big</Button>

<Button variant="secondary">Secondary</Button>

<Button variant="secondary" frame>Secondary Frame</Button>

<Button variant="secondary" size="big">Secondary Big</Button>

<Button variant="secondary" frame size="big">Secondary Frame Big</Button>

<Button variant="tertiary">Tertiary</Button>

<Button variant="tertiary" frame>Tertiary Frame</Button>

<Button variant="tertiary" size="big">Tertiary Big</Button>

<Button variant="tertiary" frame size="big">Tertiary Frame Big</Button>

<Button disabled>Disabled</Button>

<Button frame disabled>Disabled Frame</Button>

<Button size="big" disabled>Disabled Big</Button>

<Button frame size="big" disabled>Disabled Frame Big</Button>

Full Width

<Button fullWidth>Primary</Button>

<Button variant="secondary" fullWidth>Secondary</Button>

<Button variant="tertiary" fullWidth>Tertiary</Button>