Button

cc-button wraps native <button> HTML element.

<cc-button>Button</cc-button>

Theme

<cc-button theme="primary">Button</cc-button>
<cc-button theme="success">Button</cc-button>
<cc-button theme="warning">Button</cc-button>
<cc-button theme="danger">Button</cc-button>
<cc-button theme="neutral">Button</cc-button>

Sizes

<cc-button size="small">Button</cc-button>
<cc-button size="medium">Button</cc-button>
<cc-button size="large">Button</cc-button>

Text Buttons

<cc-button theme="text" size="small">Button</cc-button>
<!-- default to medium size -->
<cc-button theme="text" size="medium">Button</cc-button>
<cc-button theme="text" size="large">Button</cc-button>

Link Buttons

<cc-button href="https://example.com">Link</cc-button>
<cc-button href="https://example.com" target="_blank">New Window</cc-button>
<cc-button href="/github.svg" download="github.svg">Download</cc-button>

Icon Buttons

Buttons that only show an icon to represent do not have an accessible name. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree. Assistive technology then uses the accessibility tree to navigate and manipulate page content.

To give an icon button an accessible name, put a label attribute on cc-icon that concisely describes the button’s functionality.

<cc-button size="small">
  <cc-icon icon="chevron-right" label="Go to next page"></cc-icon>
</cc-button>
<cc-button size="medium">
  <cc-icon icon="chevron-right" label="Go to next page"></cc-icon>
</cc-button>
<cc-button size="large">
  <cc-icon icon="chevron-right" label="Go to next page"></cc-icon>
</cc-button>

However, it is worth noting that for the button to have text visually apparent can aid people who may not be familiar with the icon’s meaning or understand the button’s purpose. This is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses. So, it would be best to add a tooltip that also describe the meaning of the button when button is hovered or focused.

<cc-button size="small">
  <cc-icon icon="chevron-right" label="Go to next page"></cc-icon>
  <cc-tooltip slot="tooltip" text="Go to next page"></cc-tooltip>
</cc-button>
<cc-button size="medium">
  <cc-icon icon="chevron-right" label="Go to next page"></cc-icon>
  <cc-tooltip slot="tooltip" text="Go to next page"></cc-tooltip>
</cc-button>
<cc-button size="large">
  <cc-icon icon="chevron-right" label="Go to next page"></cc-icon>
  <cc-tooltip slot="tooltip" text="Go to next page"></cc-tooltip>
</cc-button>

Icon/Text Buttons

Add a cc-icon with slot set to prefix.

<cc-button size="small">
  <cc-icon icon="chevron-right" slot="prefix"></cc-icon>
  Go to next page
</cc-button>
<cc-button size="medium">
  <cc-icon icon="chevron-right" slot="prefix"></cc-icon>
  Go to next page
</cc-button>
<cc-button size="large">
  <cc-icon icon="chevron-right" slot="prefix"></cc-icon>
  Go to next page
</cc-button>

Add a cc-icon with slot set to suffix.

<cc-button size="small">
  <cc-icon icon="chevron-right" slot="suffix"></cc-icon>
  Go to next page
</cc-button>
<cc-button size="medium">
  <cc-icon icon="chevron-right" slot="suffix"></cc-icon>
  Go to next page
</cc-button>
<cc-button size="large">
  <cc-icon icon="chevron-right" slot="suffix"></cc-icon>
  Go to next page
</cc-button>

Loading

cc-spinner will be imported and appended to button when loading attribute is added. Elements except spinner are visually set to hidden where spinner is absolute positioned.

Accessibility: When button is loading, it will have aria-busy="true".

<cc-button loading>Submit</cc-button>

Disabled

This disabled attribute prevents the user from interacting with the button: it cannot be pressed or focused.

<cc-button disabled>Submit</cc-button>

Type

1. button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element’s events, which are triggered when the events occur.

<!-- Will default to type="button", you don't need to set a type="button" -->
<cc-button>Get Started</cc-button>

2. submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value.

<form name="contact-form" style="display: flex; align-items: flex-end; gap: .5em;">
  <cc-text-field name="country" label="Country"></cc-text-field>
  <cc-button type="submit">Submit</cc-button>
</form>
<script>
  document.querySelector("[name=contact-form]").addEventListener("submit", function(event) {
    alert("Country: " + new FormData(this).get("country"));
  });
</script>

3. reset: The button resets all the controls to their initial values, like <input type="reset">. (This behavior tends to annoy users.)

From a UX point of view, this is considered bad practice, so you should avoid using this type of button unless you really have a good reason to include one.

<form name="contact-form-reset" style="display: flex; align-items: flex-end; gap: .5em;">
  <cc-text-field 
    name="country" 
    label="Country" 
    placeholder="country"
    helper-text="Your country"
  ></cc-text-field>
  <cc-button type="reset">Reset</cc-button>
</form>