Button component - Component API

Here is the API for the component:

size enum

Acceptable values:

  1. small
  2. medium
  3. large
color enum

Acceptable values:

  1. primary
  2. secondary
  3. tertiary
  4. critical
text string required

The text of the button or value of aria-label if isIconOnly is set to true.

If no text value is defined an error will be thrown.

icon string

Use this parameter to show an icon. Acceptable value: any Flight icon name.

🚨 IMPORTANT a11y note: tertiary buttons have transparent backgrounds, and interactive elements must communicate interactivity with more than just color. Therefore, a leading or trailing icon is required when using the tertiary color. WCAG 2.1 Criterion 1.4.1: Use of Color (Level A)

iconPosition enum

Positions the icon before or after the text. Acceptable values:

  1. leading
  2. trailing
isIconOnly boolean

Default: false

This indicates if the button will only contain an icon.

Notice: an internal check is in place to ensure that accessible text is still applied to the component.

isFullWidth boolean

Default: false

This indicates that a button should take up the full width of the parent container.

href

This is the URL parameter that is passed down to the <a> element.

isHrefExternal boolean

Default: true

This controls if the <a> link is external and so for security reasons we need to add the target="_blank" and rel="noopener noreferrer" attributes to it.

route/models/model/query/current-when/replace

These are the parameters that are passed down as arguments to the <LinkTo/LinkToExternal> component.

isRouteExternal boolean

Default: false

This controls if the "LinkTo" is external to the Ember engine (more details here) in which case it will use a <LinkToExternal> instead of a simple <LinkTo> for the @route.

...attributes

...attributes spreading is supported on this component.