Hudl Design System

Last Modified:August 29, 2016

Buttons

Uniform-UI provides custom button styles for actions in forms, dialogs and any place within Hudl that is submitting information or initiating action. There are a variety of contextual variations, sizes and usages across the spectrum for what you’ll need to build Hudl. Learn more about correct application of Uniform buttons.

A more semantic button

Rather than using non-semantic html elements, such as <p> or <div> or <span> to create button-like behavior, Uniform-UI suggests using <button> to create buttons. This carries semantic meaning and gives us default browser behaviors that non-semantic elements don’t provide.

In some cases, you might want to use <a class="uni-btn" role="button"> as a button. This works. However, there’s a difference in how that anchor would be activated. A native <button> is activated with the <spacebar> when it has focus. An <a> is activated by hitting <enter>. If you’re using anchors as buttons, you will need to add an event handler that listens for the <spacebar> to maintain consistency with native buttons.

# Standard Buttons

Uniform-UI includes five predefined button styles, each serving its own purpose.

<!-- This is the default button, and is the most commonly used button type. -->
<button class="uni-btn">Button</button>

<!-- The Primary button should be used sparingly. -->
<!-- Use it for only the most important actions such as logging into Hudl -->
<button class="uni-btn--primary">Primary</button>

<!-- The Secondary button. -->
<button class="uni-btn--secondary">Secondary</button>

<!-- The Subtle button. -->
<button class="uni-btn--subtle">Subtle</button>

<!-- The Destroy button should be used for destructive actions such as deleting a video. -->
<button class="uni-btn--destroy">Destroy</button>

<!-- The Confirm button should be used for positive, successful actions. -->
<button class="uni-btn--confirm">Confirm</button>

<!-- To disable a button either add the disabled attribtue or the uni-btn--disabled class -->
<button class="uni-btn--confirm" disabled>Disabled</button>

Uniform-UI-Component

Documentation →

<Button type="primary" text="Button"/>

# Minimal Buttons

The minimal, text buttons can be used in a variety of conditions, including as a secondary action within a modal (cancelling an action, for example), or as actions within a card.

<!--  -->
<button class="uni-btn--minimal">Button</button>

<!-- -->
<button class="uni-btn--primary--minimal">Primary</button>

<!--  -->
<button class="uni-btn--secondary--minimal">Secondary</button>

<!--  -->
<button class="uni-btn--subtle--minimal">Subtle</button>

<!--  -->
<button class="uni-btn--destroy--minimal">Destroy</button>

<!--  -->
<button class="uni-btn--confirm--minimal">Confirm</button>

<!--  -->
<button class="uni-btn--cancel">Cancel</button>

Uniform-UI-Component

Documentation →

<Button type="primary" style="minimal" text="Button"/>

# Size Variations

Uniform UI provides three size variations that are utilized by a modifier class such as `uni-btn--large`. Without any size modifiers, a button is `uni-btn--medium`, by default.

<!--  -->
<button class="uni-btn uni-btn--small">Button</button>

<!--  -->
<button class="uni-btn uni-btn--medium">Button</button>

<!--  -->
<button class="uni-btn uni-btn--large">Button</button>

Uniform-UI-Component

Documentation →

<Button type="primary" size="small" text="Button"/>

# Buttons with icons

Adding icons to buttons is quite easy. The size of the icon inside the button is relative to the size of the button itself. Also, the color of the icon will automatically be the same color as the color of the text inside the button.The best method of using icons in buttons is with the button component from uniform-ui-components. However, if happened to need to hand code some non-react buttons with icons, reach out to us and we'll offer some potentially useful avenues.

Uniform-UI-Component

Documentation →

<Button type="primary" text="Button" icon={``}/>

# Disabled buttons

Any type of button can be disabled by adding either the class of `uni-btn--is-disabled` or the `disabled` attribute to the button. All buttons have a consistent disabled state, regardless of button type. The uni-btn--is-disabled state class is a modifier class and is added in addition to an existing uni-btn, uni-btn--primary, uni-btn--secondary, uni-btn--subtle, etc class. State classes do not stand alone.

<!-- Add the class of uni-btn--disabled in addition to the already existing uni-btn class -->
<button class="uni-btn uni-btn--is-disabled">Button</button>

<!-- Or add the disabled attribute -->
<button class="uni-btn" disabled>Button</button>

# Button state, spinning

After pressing a button, the spinning state indicates the active state where a form is being submitted or some other action is in progress. The uni-btn--is-spinning state class is a modifier class and is added in addition to an existing uni-btn, uni-btn--primary, uni-btn--secondary, uni-btn--subtle, etc class. State classes do not stand alone.

<!--  -->
<button class="uni-btn uni-btn--is-spinning">
  <span class="uni-btn__content-container">Button</span>
</button>

<!--  -->
<button class="uni-btn--minimal uni-btn--is-spinning">
  <span class="uni-btn__content-container">Button</span>
</button>

Uniform-UI-Component

Documentation →

<Button type="primary" text="Button" status="spinning"/>

# Button state, success

This state indicates the successful completion of an active state. The uni-btn--is-success state class is a modifier class and is added in addition to an existing uni-btn, uni-btn--primary, uni-btn--secondary, uni-btn--subtle, etc class. State classes do not stand alone.

<!--  -->
<button class="uni-btn uni-btn--is-success">
  <span class="uni-btn__content-container">Button</span>
</button>

<!--  -->
<button class="uni-btn--minimal uni-btn--is-success">
  <span class="uni-btn__content-container">Button</span>
</button>

Uniform-UI-Component

Documentation →

<Button type="primary" text="Button" status="success"/>

# Button state, failure

This state indicates the unsuccessful completion of an active state. The uni-btn--is-failure state class is a modifier class and is added in addition to an existing uni-btn, uni-btn--primary, uni-btn--secondary, uni-btn--subtle, etc class. State classes do not stand alone.

<!--  -->
<button class="uni-btn uni-btn--is-failure">
  <span class="uni-btn__content-container">Button</span>
</button>

<!--  -->
<button class="uni-btn--minimal uni-btn--is-failure">
  <span class="uni-btn__content-container">Button</span>
</button>

Uniform-UI-Component

Documentation →

<Button type="primary" text="Button" status="failure"/>

Working example of state

This example show the full cycle of a button. The Upload button will achieve success, while the Exchange button will fail. This is still in prototype stage at this point.

However, this should be solidified by the time Uniform-UI-Components releases the button component.

# Block Buttons

By default, Kickoff buttons are `inline-block`, meaning they'll only be as wide as the content inside them. If you need a button to be as wide as its parent container, use the `uni-btn--block` modifier.

<!-- This button will be as wide as the containing element it sits inside -->
<p><button class="uni-btn--primary uni-btn--block">Block Button</button></p>

Uniform-UI-Component

Documentation →

<Button type="primary" text="Button" isBlock/>

# Buttons row

If you have a row of buttons and want to automatically add margin between each, simply wrap those buttons in a block level element using one of the uni-btn__row classes [uni-btn__row--eighth, uni-btn__row--quarter, uni-btn__row--half, uni-btn__row--one, uni-btn__row--one-and-half, uni-btn__row--two, uni-btn__row--three, uni-btn__row--four]. The space is aligned with Uniform spacing variables and classes you use elsewhere. The class uni-btn__row applies the same amount of space as uni-btn__row--half

<!--  -->
<div class="uni-btn__row--half">
  <button class="uni-btn">this</button>
  <button class="uni-btn">is a</button>
  <button class="uni-btn">row of</button>
  <button class="uni-btn">buttons,</button>
  <button class="uni-btn">ya heard?</button>
</div>

Uniform-UI-Component

Documentation →

<ButtonRow space="half">
  <Button type="primary" text="Button1"/>
  <Button type="primary" text="Button2"/>
  <Button type="primary" text="Button3"/>
</ButtonRow>

# Button Mixins

# Button mixin

Used to create standard buttons.

@include button($variant, $bespoke);

While the mixin allows you to create bespoke, non-Uniform buttons, we strongly encourage you to reconsider creating new variants. Regardless, you’ll need to reach out to Design Systems to learn the additional hoops that need to be jumped through to create your own variants.

Settings

Parameter Type Default Value Description
$color list-map value secondary Pass one a four values [ primary, secondary, destroy, confirm ]
$bespoke --- null The enables you to create buttons outside the system.

# Minimal button mixin

Used to create minimal buttons.

@include button-flat($variant, $bespoke);

See note with button mixin about creating you own bespoke variants

Settings

Parameter Type Default Value Description
$variant list-map value secondary Pass one a five values [ primary, secondary, destroy, confirm or cancel ]
$bespoke --- null The enables you to create buttons outside the system.

# Button size mixin

Used to create size variations for buttons.

@include button-size($size);

Settings

Parameter Type Default Value Description
$size list-map value medium Pass one of three values [ small, medium, or large. Additionally, there's the option of creating special snowflake button sizes, but you'll need help from someone on Design Systems to make that happen.]