Button Link

Examples

Basic Link

<vega-button-link 
  link="https://heartland.us"
>
  Link Label
</vega-button-link>

Link with icon

<vega-button-link 
  size='large' 
  icon='hb-menu' 
  type='icon-left'
  link="https://heartland.us"
  label='Link Label'
  icon-type='icon'
>
Link Label
</vega-button-link>

Usage

Link buttons are simple elements which mimic the behavior of text links, however they provide the ability to add some functionality, such as icons or various JavaScript functions. Unlike regular buttons, they have no outline, but appear much like regular text links.

These may be used for menus or various other places where a simple text link will not fulfill the intended purpose.

Properties

Name	Description	Default
link	The url of the link string	#
eventful	Deprecated To be removed soon. For eventful links, do not set the `link` property. Boolean	true
size	This designates the size of the link (either default, large, or small).	default
icon	The vega-button-link can optionally be associated with an icon, which may be chosen from a list of icon design tokens or set as a Font Awesome class. The icon is optional, however, it is required if the type attribute is set to icon-left or icon-right. string
icon-type	There are three options for text placement under the “type” metadata - either a default type setting. Choices include ‘icon’ and ‘button’.	icon
icon-align	There are three options for text placement under the “type” metadata - either a default type setting, ‘left’, or ‘right’.	text
label	This designates the text which will be displayed on the link. string
disabled	This will render the button to be greyed out and will appear to be disabled. Note: it is not recommended to use this attribute, as it may cause usability and accessibility issues. boolean	false
danger	Danger buttons could be used for destructive actions or actions that could cause unwanted results boolean	false

All Parameters


<vega-button-link
    size='default|large|small'
    link="https://heartland.us"
    label='Label of the Link'
    icon='e.g. cart'
    icon-type='default|button'
    icon-align='left|right'
    danger='true|false',
>
    Label of the Link
</vega-button-link>

Event

When a vega-button-link is clicked, the vegaClick event is dispatched.

document.getElementById("button_id").addEventListener("vegaClick", (e) => { console.log(e) })

For more details, view in Storybook.

Accessibility

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
Ensures every id attribute value is unique.
Ensure that links with the same accessible name serve a similar purpose.
Ensures links have discernible text.

Best Practices

These buttons are designed to mimic links, and should look and behave as much like a regular link as possible.

A good place to use these is within link lists.