Button: Colour: Primary

Reference

Notes
HTML
View
Assets
Info

Inline SVG Icons will be filled to match the color of the text of the button, which is contrast checked. You can override this by adding a class of icon--native-fill, to use the fill(s) in the SVG.

Alteratively, icons can be given modifiier classes of:

button--primary
button--secondary
button--tertiary
...which will forcibly fill them with primary, secondary, or tertiary color respectively.


        
        <a href="#" class="button  button--primary">
    Primary Button
</a>

<button type="submit" class="button   button--primary">
    Go (button)
</button>

<input type="reset" value="Reset (input)" class="button   button--primary" />

<div>
    <a href="#" class="button  button--icon  button--primary">
        <i class="icon" aria-hidden="true">
            <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 0H1.5C1.23478 0 0.98043 0.105357 0.792893 0.292893C0.605357 0.48043 0.5 0.734784 0.5 1V13C0.5 13.2652 0.605357 13.5196 0.792893 13.7071C0.98043 13.8946 1.23478 14 1.5 14H8.5C8.76522 14 9.01957 13.8946 9.20711 13.7071C9.39464 13.5196 9.5 13.2652 9.5 13V1C9.5 0.734784 9.39464 0.48043 9.20711 0.292893C9.01957 0.105357 8.76522 0 8.5 0ZM5.5 13H4.5V12H5.5V13ZM1.5 11V1H8.5V11H1.5Z" fill="black" />
            </svg>
        </i>
        <b>Primary Button (icon before)</b>
    </a>

    <a href="#" class="button  button--icon  button--primary">
        <b>Primary Button (icon after)</b>
        <i class="icon" aria-hidden="true">
            <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 0H1.5C1.23478 0 0.98043 0.105357 0.792893 0.292893C0.605357 0.48043 0.5 0.734784 0.5 1V13C0.5 13.2652 0.605357 13.5196 0.792893 13.7071C0.98043 13.8946 1.23478 14 1.5 14H8.5C8.76522 14 9.01957 13.8946 9.20711 13.7071C9.39464 13.5196 9.5 13.2652 9.5 13V1C9.5 0.734784 9.39464 0.48043 9.20711 0.292893C9.01957 0.105357 8.76522 0 8.5 0ZM5.5 13H4.5V12H5.5V13ZM1.5 11V1H8.5V11H1.5Z" fill="black" />
            </svg>
        </i>
    </a>
</div>

<div>
    <a href="#" class="button  button--icon  button--primary">
        <i class="icon  icon--primary" aria-hidden="true">
            <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 0H1.5C1.23478 0 0.98043 0.105357 0.792893 0.292893C0.605357 0.48043 0.5 0.734784 0.5 1V13C0.5 13.2652 0.605357 13.5196 0.792893 13.7071C0.98043 13.8946 1.23478 14 1.5 14H8.5C8.76522 14 9.01957 13.8946 9.20711 13.7071C9.39464 13.5196 9.5 13.2652 9.5 13V1C9.5 0.734784 9.39464 0.48043 9.20711 0.292893C9.01957 0.105357 8.76522 0 8.5 0ZM5.5 13H4.5V12H5.5V13ZM1.5 11V1H8.5V11H1.5Z" fill="black" />
            </svg>
        </i>
        <b>Primary Button (icon primary)</b>
    </a>
    <a href="#" class="button  button--icon  button--primary">
        <i class="icon  icon--secondary" aria-hidden="true">
            <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 0H1.5C1.23478 0 0.98043 0.105357 0.792893 0.292893C0.605357 0.48043 0.5 0.734784 0.5 1V13C0.5 13.2652 0.605357 13.5196 0.792893 13.7071C0.98043 13.8946 1.23478 14 1.5 14H8.5C8.76522 14 9.01957 13.8946 9.20711 13.7071C9.39464 13.5196 9.5 13.2652 9.5 13V1C9.5 0.734784 9.39464 0.48043 9.20711 0.292893C9.01957 0.105357 8.76522 0 8.5 0ZM5.5 13H4.5V12H5.5V13ZM1.5 11V1H8.5V11H1.5Z" fill="black" />
            </svg>
        </i>
        <b>Primary Button (icon secondary)</b>
    </a>
    <a href="#" class="button  button--icon  button--primary">
        <i class="icon  icon--tertiary" aria-hidden="true">
            <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.5 0H1.5C1.23478 0 0.98043 0.105357 0.792893 0.292893C0.605357 0.48043 0.5 0.734784 0.5 1V13C0.5 13.2652 0.605357 13.5196 0.792893 13.7071C0.98043 13.8946 1.23478 14 1.5 14H8.5C8.76522 14 9.01957 13.8946 9.20711 13.7071C9.39464 13.5196 9.5 13.2652 9.5 13V1C9.5 0.734784 9.39464 0.48043 9.20711 0.292893C9.01957 0.105357 8.76522 0 8.5 0ZM5.5 13H4.5V12H5.5V13ZM1.5 11V1H8.5V11H1.5Z" fill="black" />
            </svg>
        </i>
        <b>Primary Button (icon tertiary)</b>
    </a>
</div>


        {{ spaceless }}
{% set classString = '' %}
{% for class in classes %}
  {% set classString = classString ~ '  ' ~ class %}
{% endfor %}

<a href="{{ link }}" class="button{% if classString %}{{ classString }}{% endif %}">
  {{ text }}
</a>

{#<a href="{{ link }}" class="button {% if classString %}{{ classString }}{% endif %}">#}
{#  <span>Button with external link icon</span>#}
{#  <i class="icon  icon--external-primary" aria-hidden="true"></i>#}
{#</a>#}

{#<a href="{{ link }}" class="button  button--pointy {% if classString %}{{ classString }}{% endif %}">#}
{#  Pointy button#}
{#</a>#}

<button type="submit" class="button {% if classString %}{{ classString }}{% endif %}">
  Go (button)
</button>

<input type="reset" value="Reset (input)" class="button {% if classString %}{{ classString }}{% endif %}" />
{{ endspaceless }}

<div>
  <a href="{{ link }}" class="button  button--icon{% if classString %}{{ classString }}{% endif %}">
    <i class="icon" aria-hidden="true">
      {% include '@icon--phone' %}
    </i>
    <b>{{ text }} (icon before)</b>
  </a>

  <a href="{{ link }}" class="button  button--icon{% if classString %}{{ classString }}{% endif %}">
    <b>{{ text }} (icon after)</b>
    <i class="icon" aria-hidden="true">
      {% include '@icon--phone' %}
    </i>
  </a>
</div>

<div>
  <a href="{{ link }}" class="button  button--icon{% if classString %}{{ classString }}{% endif %}">
    <i class="icon  icon--primary" aria-hidden="true">
      {% include '@icon--phone' %}
    </i>
    <b>{{ text }} (icon primary)</b>
  </a>
  <a href="{{ link }}" class="button  button--icon{% if classString %}{{ classString }}{% endif %}">
    <i class="icon  icon--secondary" aria-hidden="true">
      {% include '@icon--phone' %}
    </i>
    <b>{{ text }} (icon secondary)</b>
  </a>
  <a href="{{ link }}" class="button  button--icon{% if classString %}{{ classString }}{% endif %}">
    <i class="icon  icon--tertiary" aria-hidden="true">
      {% include '@icon--phone' %}
    </i>
    <b>{{ text }} (icon tertiary)</b>
  </a>
</div>

File:

Content:


                                @use "sass:math";

$button-background-colors: (
  'primary': $primary,
  'secondary': $secondary,
	'tertiary': $tertiary,
	'offwhite': $offwhite,
  'white': white,
  'black': black,
);

$button-outline-colors: (
	'primary': $primary,
	'secondary': $secondary,
	'tertiary': $tertiary,
	'offwhite': $offwhite,
	'white': white,
	'black': black,
);

.button {
	// For the moment, these are defined as little mixins over in __vars/mixins
	// so they can be included elsewhere

	@include button;

	// Sizes

	&--xs {
		@include button--xs;
	}

	&--sm {
		@include button--sm;
	}

	&--lg {
		@include button--lg;
	}

	// Layout

	&--block {
		@include button--block;
	}

	&--icon {

	}

	&--wider {
		@include button--block;
		padding-left: 2em;
		padding-right: 2em;
		max-width: math.div($line-length-max, 1.5);
	}

	// Colours

	@each $name, $value in $button-background-colors {
	  &--#{$name} {
	    @include button--background($value);
			--color: #{choose-contrast-color-prefer-white($value)};
	  }
	}

	// Outlines

	@each $name, $value in $button-outline-colors {
		&--outline-#{$name} {
			@include button--outline($value);
		}
	}

	// Icons

	&--pointy {
		@include button--pointy;
	}

	.icon {
		&:where(:not(.icon--margin-before)) {
			margin-right: 0.65em;
		}

		&:where(:not(.icon--native-fill)) {
			svg, path {
				fill: var(--color);
			}
		}
	}

	* ~ .icon {
		margin-left: 0.65em;
		margin-right: 0;
	}

	// States

	&[disabled] {
		@include button--disabled;
	}
}

URL: /components/raw/button/_buttons.scss
Filesystem Path: web/themes/custom/um-ssw/components/button/_buttons.scss
Size: 1.5 KB

Handle: @button--primary
Variants (14): Default , Colour: Primary , Colour: Secondary , Colour: Tertiary , Colour: White , Colour: Offwhite , Outline: Primary , Outline: Secondary , Outline: Tertiary , Outline: White , Outline: Offwhite , Size: XS , Size: Small , Size: Large
Preview:
- With layout
- Component only
Filesystem Path: web/themes/custom/um-ssw/components/button/button.twig
References (1): @icon--phone