Button Circle

Examples

<vega-button-circle 
  variant='primary' 
  size='large' 
  icon='hb-menu'
  label='This labels the button'
  disabled=false
>
</vega-button-circle>

<vega-button-circle
    variant='primary'
    size='small'
    icon='search'
    label='This is the label'
    disabled=false
    danger=false
>
</vega-button-circle>

Danger Button

<vega-button-circle
    variant='primary'
    size='small'
    icon='close'
    label='This is a danger button'
    disabled=false
    danger=true
>
</vega-button-circle>

Usage

The vega-button-circle element can be used as a button on mobile devices, or can be used as a floating element on a page. This type of floating element is also commonly used on smaller portable devices with limited screen size. It may also be used within tables or header components.

The label property provides a tooltip, and can be used for explaining what the button is.

Types of Circle Buttons

Menus (using the hamburger icon)
Clickable icons (e.g. email)
Social media links

States

Circle buttons in Vega have the following states:

Default
Hovered
Focused
Pressed

Variants

There are two variants for circle buttons in Vega:

Primary
Secondary

Primary circle buttons are often used for navigation purposes. Secondary variants are used for less important actions.

Properties

Name	Description	Default
variant	The component itself contains two variants: primary and secondary. The primary variant should be used for buttons which are the main selection option for a form (or CTA), while the secondary should be used for alternate options. `primary`,`secondary`,`icon-only`	primary
size	Buttons have four sizes: default, small, extra-small, and large, and should be chosen to fit the context of the specific form. Optional	default
icon	The vega-button can optionally be associated with an icon, which may be chosen from a list of icon design tokens or by using a Font Awesome class. Optional
label	This designates the text which will be displayed on the button. Required
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.	false
danger	Danger buttons may be used for destructive actions or actions that could cause unwanted results. boolean	false
icon-color	Changes the color of the button circle. Will only work if the variant is set to `icon-only`. Use an existing color token.	text-primary

All Parameters

<vega-button-circle
    variant='primary|secondary|icon-only'
    size='default|small|large'
    icon='e.g. cart'
    label='aria-label'
    disabled=true|false
    danger=true|false
    icon-color='any color token'
>
</vega-button-circle>

Event

When a vega-button-circle 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 ARIA attributes are allowed for an element’s role.
Ensures all ARIA attributes have valid values.
Ensures attributes that begin with aria- are valid ARIA attributes.
Ensures buttons have discernible text.
Ensures every id attribute value is unique.
Nested interactive controls are not announced by screen readers.

Best Practices

Circle buttons can be used for many purposes on either mobile devices, or as clickable icons for web-based applications.
They are ideal when there is a limited amount of space on the page, but where access to an action or specific link needs to be made prominent.
They may be used as floating menus, or other navigation tools on mobile devices.
Make use of various states to inform a user that they are indeed clickable.

Don’t

Overuse of this type of button should be avoided, as they have a tendency to look like tags.
Circle buttons do not work well for nested elements.
Circle buttons do not stack well.