This is the staging site of seb.io, The Green Design System is work in progress and not ready to use, but feel free to explore!
Button
Buttons are an essential element of interaction design. Their primary role is to help people take actions quickly.
Status
work in progressform
button group
Code
Examples
Default button
The defaut button har the prio primary and is the variant normal.
<gds-button>Send payment</gds-button>Prio
Buttons exist in three different prios, Primary, Secondary and Tertiary
<gds-button prio="primary">Send payment</gds-button>
<gds-button prio="secondary">Cancel</gds-button>
<gds-button prio="tertiary">More</gds-button>Variants
Each prio button can be one of the following variants: Neutral, Positive and Negative
<!-- Primary -->
<gds-button variant="neutral">Submit</gds-button>
<gds-button variant="positive">Approve</gds-button>
<gds-button variant="negative">Revoke</gds-button>
<!-- Secondary -->
<gds-button prio="secondary" variant="neutral">Submit</gds-button>
<gds-button prio="secondary" variant="positive">Approve</gds-button>
<gds-button prio="secondary" variant="negative">Revoke</gds-button>
<!-- Tertiary -->
<gds-button prio="tertiary" variant="neutral">Submit</gds-button>
<gds-button prio="tertiary" variant="positive">Approve</gds-button>
<gds-button prio="tertiary" variant="negative">Revoke</gds-button>
Icons
Buttons exist in three different prios, Primary, Secondary and Tertiary
<gds-button prio="primary"><gds-icon slot="lead" name="send" />Send payment</gds-button>
<gds-button prio="secondary"><gds-icon slot="trail" name="arrow-up" />Upload</gds-button>
<gds-button prio="primary"><gds-icon slot="lead" name="arrow-down" />Download</gds-button>Sizes
Buttons can be small, medium or large. The default size is medium.
<gds-button size="small">Small</gds-button>
<gds-button>Medium</gds-button>
<gds-button size="large">Large</gds-button>Icon button
If a single gds-icon is the only child of a button, it will render as a circular icon button.
<gds-button size="small"><gds-icon name="arrow" /></gds-button>
<gds-button><gds-icon name="arrow" /></gds-button>
<gds-button size="large"><gds-icon name="arrow" /></gds-button>Disabled
We don't encourage to use components with a disabled state but the button can be disabled if needed
<gds-button prio="primary" disabled>Send payment</gds-button>
<gds-button prio="secondary" disabled>Cancel</gds-button>
<gds-button prio="tertiary" disabled>More</gds-button>