frost-button.md

frost-button

• API
• Examples

API

Attribute	Type	Value	Description
autofocus	boolean	false	default - basic button
		true	sets focus on button
design	string	info-bar	custom button styling for the info-bar context. Requires icon to be specified. Should not be used with priority and size.
disabled	boolean	false	default - basic button
		true	disabled button
hook	string	<unique-name>	name used for testing with ember-hook
icon	string	<icon-name>	name of a frost-icon
onClick	closure-action	<closure-action>	triggers associated action when the button is clicked
onFocus	closure-action	<closure-action>	triggers associated action when the button receives focusin event
options	object	{<attributes>}	property object used to spread the attributes to the top level of the component with ember-spread.
pack	string	frost	default - name of the icon pack
priority	string	primary	primary action button
		secondary	secondary action button
		tertiary	tertiary action button
size	string	small	small size button
		medium	medium size button
		large	large size button
text	string	<button-text>	text to display on the button
title	string	<tooltip-text>	tooltip text to display on hover
vertical	boolean	false	default - set button text below the icon on an icon and text button
		true	sets the button text below the icon

Testing with ember-hook

The button component is accessible using ember-hook:

• Top level hook - $hook('<hook-name>')

Spread attributes

The button component use ember-spread to spread a property object against the top level of the component.

Examples

Primary

{{frost-button
  priority='primary'
  size='small'
  text='Action'
}}

Secondary

{{frost-button
  priority='secondary'
  size='small'
  text='Action'
}}

Tertiary

{{frost-button
  priority='tertiary'
  size='small'
  text='Action'
}}

Size - small

{{frost-button
  priority='primary'
  size='small'
  text='Action'
}}

Size - medium

{{frost-button
  priority='primary'
  size='medium'
  text='Action'
}}

Size - large

{{frost-button
  priority='primary'
  size='large'
  text='Action'
}}

Icon - small

{{frost-button
  priority='primary'
  size='small'
  icon='add'
}}

Icon - medium

{{frost-button
  priority='primary'
  size='medium'
  icon='add'
}}

Icon - large

{{frost-button
  priority='primary'
  size='large'
  icon='add'
}}

Disabled

{{frost-button
  priority='primary'
  size='medium'
  text='Action'
  disabled=true
}}

Autofocus

{{frost-button
  priority='primary'
  size='medium'
  text='Action'
  autofocus=true
}}

Title

{{frost-button
  priority='primary'
  size='medium'
  icon='add'
  title='This is a tooltip message'
}}

Vertical

{{frost-button
  priority='tertiary'
  size='small'
  icon='round-add'
  text='Text'
  vertical=true
}}

Icon and Text

{{frost-button
  priority='tertiary'
  size='small'
  icon='round-add'
  text='Text'
}}

Design - info-bar

{{frost-button
  design='info-bar'
  icon='infobar-find'
  text='Action'
}}

Event - onClick

{{frost-button
  priority='primary'
  size='medium'
  text='Action'
  onClick=(action 'onClickHandler')
}}

actions: {
  onClickHandler () {
    console.log('button clicked')
  }
}

Event - onFocus

{{frost-button
  priority='primary'
  size='medium'
  text='Action'
  onFocus=(action 'onFocusHandler')
}}

actions: {
  onFocusHandler () {
    console.log('button focused')
  }
}

Spread

{{frost-button
  options=(hash
    priority='primary'
    size='small'
    text='Action'
  )
}}