| Name | Control |
|---|---|
| label | |
| backgroundColor | |
| primary | |
| size | |
| onClick | - |
| render | - |
<button type="button" class="button button--medium button--primary">
Button
</button>| Name | Value | Preview |
|---|---|---|
| @white | #fff | |
| @black | #111 | |
| @dark-purple | #412234 | |
| @misty-rose | #ead7d7 | |
| @middle-blue-purple | #7d82b8 | |
| @rose | #ff007f | |
| @june-bud | #bdd358 | |
| @tart-orange | #fe4a49 |
| Name | Value | Preview |
|---|---|---|
| @color-font-base | @black | |
| @color-font-invert-base | @white | |
| @color-background-base | @white | |
| @color-background-secondary | @rose | |
| @color-background-tertiary | @middle-blue-purple | |
| @color-background-error | @tart-orange | |
| @color-background-success | @june-bud |
| Name | Value | Preview |
|---|---|---|
| @family-font-base | 'Dosis', Helvetica, Arial, sans-serif | Lorem ipsum |
| @family-font-secondary | 'Orelega One', Helvetica, Arial, sans-serif | Lorem ipsum |
| Name | Value | Preview |
|---|---|---|
| @size-font-small | 1.2rem | Lorem ipsum |
| @size-font-base | 1.3rem | Lorem ipsum |
| @size-font-normal | 1.6rem | Lorem ipsum |
| @size-font-medium | 2.4rem | Lorem ipsum |
| @size-font-large | 3.2rem | Lorem ipsum |
| @size-font-extra-large | 4.2rem | Lorem ipsum |
| Name | Value | Preview |
|---|---|---|
| @weight-font-thin | 400 | Lorem ipsum |
| @weight-font-normal | 500 | Lorem ipsum |
| @weight-font-semi-bold | 600 | Lorem ipsum |
| @weight-font-bold | 700 | Lorem ipsum |
| Name | Value | Preview |
|---|---|---|
| @line-height-font-base | 1.3 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam veniam eum dicta. |
| @line-height-font-medium | 1.5 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam veniam eum dicta. |
| @line-height-font-large | 1.7 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam veniam eum dicta. |
| Name | Value | Preview |
|---|---|---|
| @gutter-xs | 1rem | |
| @gutter-s | 1.5rem | |
| @gutter-m | 3rem | |
| @gutter-l | 4rem | |
| @gutter-xl | 5rem | |
| @gutter-xxl | 6rem | |
| @margin-xs | 3rem | |
| @margin-s | 4rem | |
| @margin-m | 6rem | |
| @margin-l | 9rem | |
| @margin-xl | 12rem | |
| @margin-xxl | 12rem |
| Name | Value | Preview |
|---|---|---|
| @border-radius-button | 2rem |
| Name | Value | Preview |
|---|---|---|
| logo_universal_storybook |