BUX Component Development Platform

Buttons 

<!-- Primary -->
<button class="bux-button">
    Primary
</button>


<!-- Disabled -->
<button class="bux-button bux-button--disabled" aria-disabled="true">
    Disabled
</button>


<!-- Alternate -->
<button class="bux-button bux-button--alt">
    Alternate
</button>


<!-- Alternate Disabled -->
<button class="bux-button bux-button--alt-disabled" aria-disabled="true">
    Alternate Disabled
</button>


<!-- Small -->
<button class="bux-button bux-button--small">
    Small
</button>


<!-- Small Disabled -->
<button class="bux-button bux-button--small-disabled" aria-disabled="true">
    Small Disabled
</button>


<!-- Alternate Small -->
<button class="bux-button bux-button--alt-small">
    Alternate Small
</button>


<!-- Alternate Small Disabled -->
<button class="bux-button bux-button--alt-small-disabled" aria-disabled="true">
    Alternate Small Disabled
</button>


<!-- With Icon -->
<button class="bux-button bux-button--icon">
    <div class="bux-button__icon">
        <span class="icon icon-envelope" aria-hidden="true"></span>
    </div>
    Button with Icon
</button>


{# 

Button

Available variables:

- modifier:     Sets the button variant. These can be combined, e.g.: 
                'small-disabled'. Allowed values: null, disabled, alt, small,
                icon.
- icon_class:   Optional. Takes the machine name of an icon from the BUX Icon 
                library. Must have 'icon' set as the modifier. 
- button_text:  String for the label of the button.

#}

<button class="bux-button{% if modifier %} bux-button--{{ modifier }}{% endif %}" {% if "disabled" in modifier %} aria-disabled="true" {% endif %}>
  {% if icon_class %}
    <div class="bux-button__icon">
      <span class="icon {{ icon_class }}" aria-hidden="true"></span>
    </div>
  {% endif %}
  {{ button_text }}
</button>
 
/* Primary */
button_text: Primary



/* Disabled */
button_text: Disabled
modifier: disabled



/* Alternate */
button_text: Alternate
modifier: alt



/* Alternate Disabled */
button_text: Alternate Disabled
modifier: alt-disabled



/* Small */
button_text: Small
modifier: small



/* Small Disabled */
button_text: Small Disabled
modifier: small-disabled



/* Alternate Small */
button_text: Alternate Small
modifier: alt-small



/* Alternate Small Disabled */
button_text: Alternate Small Disabled
modifier: alt-small-disabled



/* With Icon */
button_text: Button with Icon
modifier: icon
icon_class: icon-envelope
  • Content: 
    @mixin button(
	$bg-color: $scarlet,
	$text-color: $white,
	$border-color: $scarlet,
	$bg-hover: $gray-dark-60,
	$text-hover: $white,
	$border-hover: $gray-dark-60
) {
	@include button-reset;
	background-color: $bg-color;
	color: $text-color;
	border: 2px solid $border-color;
	padding: rem-calc(10 20);
	font-family: $sans;
	font-size: $ts-base;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
    transition-duration: .3s;
    transition-property: background-color,border-color,color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);

	&:hover {
		background-color: $bg-hover;
		color: $text-hover;
		border-color: $border-hover;
	}

	&:focus,
	&:active {
		background-color: $bg-color;
		color: $text-color;
		border: 2px solid $border-color;
		outline: 2px solid $focus;
		outline-offset: 1px;
	}
}

// Default buttons.
button:not([class]),
.bux-button {
	@include button();
}
.bux-button--disabled {
	@include button($gray-light-80, $gray-dark-20, $gray-light-80, $gray-light-80, $gray-dark-20, $gray-light-80);
	cursor: not-allowed;
}

// Alt buttons.
.bux-button--alt {
	@include button($white, $scarlet, $scarlet);
}
.bux-button--alt-disabled {
	@include button($gray-light-80, $gray-dark-20, $gray-light-60, $gray-light-80, $gray-dark-20, $gray-light-60);
	cursor: not-allowed;
}

// Small buttons.
.bux-button--small {
	@include button();
	font-size: $ts-sm;
	padding: rem-calc(6 12);
}
.bux-button--small-disabled {
	@include button($gray-light-80, $gray-dark-20, $gray-light-80, $gray-light-80, $gray-dark-20, $gray-light-80);
	cursor: not-allowed;
	font-size: $ts-sm;
	padding: rem-calc(6 12);
}

// Alternate Small buttons.
.bux-button--alt-small {
	@include button($white, $scarlet, $scarlet);
	font-size: $ts-sm;
	padding: rem-calc(6 12);
}

.bux-button--alt-small-disabled {
	@include button($gray-light-80, $gray-dark-20, $gray-light-60, $gray-light-80, $gray-dark-20, $gray-light-60);
	cursor: not-allowed;
	font-size: $ts-sm;
	padding: rem-calc(6 12);
}

// Button with icon.
.bux-button--icon {
	@include button($gray-light-80, $scarlet, $gray-light-80, $gray-dark-60, $white, $gray-dark-60);
	display: flex;
	align-items: center;
}

.bux-button__icon {
	margin-right: $sp-16;
	height: 28px;
	width: 28px;
	display: flex;
	align-items: center;

	.icon {
		padding-top: 9px;
		font-size: 28px;
	}
}

// Use case for links styled as a button
a.bux-button {
    display: inline-block;
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src/components/button/_button.scss
  • Size: 2.4 KB

No notes defined.