Button

Ready

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-row>
  <hy-button>Primary</hy-button>
  <hy-button variant="secondary">Secondary</hy-button>
  <hy-button disabled>Primary disabled</hy-button>
  <hy-button disabled variant="secondary">Secondary Disabled</hy-button>
</hy-row>

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-row>
  <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>
</hy-row>

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