Buttons allow users to do something on the page.
Types of buttons:
- Default
- Primary
- Cancel/Destructive
Button Style
CSS Variables:
--font-size-default : 14px
--color-default : #6e787c
--color-text-white : #ffffff
There are three types of buttons:--border-radius : 4px
All Buttons
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background: transparent; background-image: none; border: 1px solid transparent; padding: 6px 12px; font-size: var(--font-size-default) |
...
;
line-height: 1.42857143;
border-radius: var(--border-radius);
user-select:none;
@extend %focus; |
Default Button
| Code Block | ||||
|---|---|---|---|---|
| ||||
border: 1px solid var(--color-default);
background-color: var(--color-white);
color: var(--color-default);
&:hover:hover{
border-color: var(--color-default);
background-color: var(--color-default);
color: var(--color-text-white);
}
&:active, &[aria-pressed="true"]{
@extend %pressed;
background-color: var(--color-default-dark);
color: var(--color-text-white);
}
&:disabled, &[aria-disabled="true"]{
pointer-events: none;
opacity: 0.4;
}
&:focus{
border: 3px solid var(--color-focus);
background: var(--color-focus);
color: var(--color-text-white);
&:hover{
background: initial;
}
} |
- Default
- Border: var(--color-default)
- Colour: var(--color-default)
- Default: var(--color-default)
- Hover:
Colour - Hover:
border-color: var(--color-default);
background-color: var(--color-default);
color: var(--color-text-white)
Background: var;
- Active:
background-color: var(--color-default-dark);
color: var(--color-text-white);
- Primary
- Colour:
- Default:
- Hover:
- Colour:
- Cancel/Destructive
- Colour:
- Default: #88161f
- Hover: #88161f
- Colour:
...