Buttons are normally used for interface actions. The HUDS button contains currently two main styles that can be further customized with different icons.

# Examples

The button comes in two variants primary(default) and secondary. You can disable the button by adding boolean property disabled and set it's height with size property. The large property is used in primary single occasions, such as with hero images and calls to action. The normal (default) size property is used with forms and similar interfaces.

Primary Secondary Primary disabled Secondary Disabled
  <hy-button variant="secondary">Secondary</hy-button>
  <hy-button disabled>Primary disabled</hy-button>
  <hy-button disabled variant="secondary">Secondary Disabled</hy-button>

If you need an anchor tag that looks like a button, use the url property.

Call to the action!
<hy-button variant="secondary" url="https://google.com" size="large">
  Call to the action!</hy-button

You can also add any icon from the Helsinki University icon bank. Usually the icon is hy-icon-arrow-left or hy-icon-arrow-right.

Icon on left Icon on right
  <hy-button icon="hy-icon-arrow-left">Icon on left</hy-button>
  <hy-button icon-right="hy-icon-arrow-right">Icon on right</hy-button>

# Properties

Property Attribute Description Type Default
ariaLabel aria-label Aria label for the element string undefined
buttonClasses button-classes Custom classes added to button element. string ''
buttonType button-type Button type. Defaults to submit. string 'submit'
disabled disabled Use this to programmatically disable the button, matches the native button functionality boolean false
icon icon Icon to use on the left side string undefined
iconRight icon-right Icon to use on the right side string undefined
isExternal is-external Use only with url property and when url open to a new window. (Also describe in alt text when url is external) boolean false
size size Size (height) of the button. Normal: 44px, large: 48px "large" \| "normal" 'normal'
state state deprecated, use disabled boolean value "disabled" \| "enabled" 'enabled'
url url Set this on if an anchor tag is required instead of a button. string ''
variant variant The element variant. Defaults to primary "primary" \| "secondary" 'primary'

Helsinki University Design System