This button component provides a means of standardising buttons within other components. Buttons with text only, text plus icons and icons only are supported. These buttons are fully configurable via their context parameters.
Use whenever a button is required to trigger an action.
Do not use in any form of navigation or to act as a link to another page.
Configuration parameters:
| Name | Type | Required/Optional | Description |
|---|---|---|---|
| type | string | Required | Button, submit or reset |
| content | string | Required | Visible text. Also specify for icon only buttons for |
| style | string | Optional | Primary, secondary or bright* |
| icon | string | Optional | Mdi icon name |
| disabled | boolean | Optional | If true, disables the button |
| icon_after | boolean | Optional | If true, icon appears after text |
| icon_only | boolean | Optional | If true, icon only appears |
| large_icon | boolean | Optional | If true, icon appears large |
*Bright should only be used for “icon_only” instances.
<button {% if id %}id="{{ id }}"{% endif %}
{% if name %}name="{{ name }}"{% endif %}
class="uol-button uol-button--{{ style }}
{% if icon %}
uol-icon uol-icon--{{ icon }}
{{ 'uol-icon--position-after' if icon_after }}
{{ 'uol-icon--icon-only' if icon_only }}
{{ 'uol-icon--icon-only--large' if large_icon }}
{% endif %}"
type="{{ type }}"
{{ 'disabled' if disabled }}
>{{ content }}</button>
<button class="uol-button uol-button--
uol-icon uol-icon--mdiArrowRight
uol-icon--icon-only
" type="button">Contact</button>
.uol-button {
@include font-size-responsive(1.125rem, 1.125rem, 1.25rem);
@include button_ripple($color-black);
@include button_focus(-6px, $radius: 9px);
line-height: 1;
box-sizing: border-box;
min-width: 10rem;
border: 0;
padding: 0.8em 1.8em;
border: 2px solid $color-black;
border-radius: 6px;
color: $color-white;
background-position: center;
text-decoration: none;
transition: background 0.5s ease;
@media (-ms-high-contrast: active) {
border: 1px solid WindowText;
}
&:hover,
&:active {
text-decoration: none;
box-shadow: 0 3px 6px 0 rgba($color-black, 0.15), 0 2px 4px 0 rgba($color-black, 0.12);
}
&:active {
background-color: lighten($color-black, 20%);
background-size: 100%;
transition: background 0s;
}
&:disabled {
color: $color-grey--medium;
background: $color-grey;
border: 0.125rem solid darken($color-white, 6%);
&:hover {
box-shadow: none;
cursor: not-allowed;
}
}
.js & {
&.uol-icon {
padding: 0.8em 2.2em;
svg {
margin-top: 0;
}
}
&.uol-icon--icon-only {
@include button_focus(-6px, $radius: 50%);
min-width: 0;
border-radius: 50%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 2.81rem;
height: 2.81rem;
min-height: 2.81rem;
@include media(">=uol-media-l") {
width: 3.12rem;
height: 3.12rem;
}
svg {
position: absolute;
}
}
&.uol-icon--icon-only--large {
svg {
transform: scale(1.4);
}
}
}
}
.uol-button--primary {
@include button_ripple($color-brand-2--dark);
border-color: $color-brand-2--dark;
&:active {
background-color: lighten($color-brand-2--dark, 7%);
}
}
.uol-button--secondary {
@include button_ripple($color-white);
color: $color-brand-2--dark;
border-color: $color-brand-2--dark;
&:active {
background-color: darken($color-white, 10%);
}
}
.uol-button--bright {
@include button_ripple($color-brand--bright);
border-color: $color-brand--bright;
&:active {
background-color: lighten($color-brand--bright, 7%);
}
}
{
"type": "button",
"content": "Contact",
"icon": "mdiArrowRight",
"icon_only": true
}