Button

Buttons allow users to navigate, submit forms, and perform other actions.

Examples Jump to heading #

Variants Jump to heading #

Buttons have four built-in variants. Set the variant attribute to default, primary, or destructive to change the button's appearance.

<quiet-button variant="default">
  Default
</quiet-button>

<quiet-button variant="primary">
  Primary  
</quiet-button>

<quiet-button variant="destructive">
  Destructive
</quiet-button>

Start & end icons Jump to heading #

Use the start and end slots to add icons. For best results, use a <quiet-icon> or an <svg> element.

<quiet-button>
  <quiet-icon slot="start" name="settings"></quiet-icon>
  Settings
</quiet-button>

<quiet-button>
  Favorite
  <quiet-icon slot="end" name="heart"></quiet-icon>
</quiet-button>

<quiet-button>
  <quiet-icon slot="start" name="link"></quiet-icon>
  Open
  <quiet-icon slot="end" name="external-link"></quiet-icon>
</quiet-button>

Link buttons Jump to heading #

Any button can be rendered as a link by setting the href attribute. This is useful to allow buttons to act as navigation. When href is present, other link options such as download, rel, and target also become available.

<quiet-button href="https://example.com/" target="_blank" rel="noreferrer noopener">
  I'm secretly a link
</quiet-button>

<quiet-button href="/assets/images/wordmark-light.svg" download>
  Download the logo
</quiet-button>

Changing the width Jump to heading #

To change a button's width, use the CSS width property.

<quiet-button style="width: 100%">
  I'm much longer now
</quiet-button>

Changing the size Jump to heading #

Use the size attribute to change the button's size. Available sizes include xs, sm, md, lg, and xl, with the default being md.

<quiet-button size="xs">Extra small</quiet-button>
<quiet-button size="sm">Small</quiet-button>
<quiet-button size="md">Medium</quiet-button>
<quiet-button size="lg">Large</quiet-button>
<quiet-button size="xl">Extra large</quiet-button>

Outline buttons Jump to heading #

Set the appearance attribute to outline to draw outlined buttons.

<quiet-button appearance="outline" variant="default">
  I'm outline
</quiet-button>

<quiet-button appearance="outline" variant="primary">
  I'm outline  
</quiet-button>

<quiet-button appearance="outline" variant="destructive">
  I'm outline
</quiet-button>

Text buttons Jump to heading #

Set the appearance attribute to text to draw text buttons. Text buttons share the same side and padding as normal buttons, but don't have a background.

<quiet-button appearance="text">
  I'm text
</quiet-button>

Image buttons Jump to heading #

Image buttons are a special appearance that let you create application icons and other picture-based buttons using images. Set the appearance attribute to image to create an image button. Image buttons are designed to conform to the size of the image you slot in.

<quiet-button appearance="image">
  <img src="/assets/images/app-icon.png" alt="Launch Quiet" style="width: 60px; height: 60px;">
</quiet-button>

Code Edit

Pill-shaped buttons Jump to heading #

Buttons can be rendered with pill-shaped edges by adding the pill attribute.

<quiet-button pill variant="default">
  I'm a pill button
</quiet-button>

<quiet-button pill variant="primary">
  I'm a pill button  
</quiet-button>

<quiet-button pill variant="destructive">
  I'm a pill button
</quiet-button>

Icon buttons Jump to heading #

To create an icon button, place an icon into the button's default slot and set the icon-label attribute to an appropriate label. The label won't be visible, but it will be available to assistive devices.

<quiet-button icon-label="Accept" variant="primary">
  <quiet-icon name="check"></quiet-icon>
</quiet-button>

<quiet-button icon-label="Reload">
  <quiet-icon name="refresh"></quiet-icon>
</quiet-button>

<quiet-button icon-label="Delete" variant="destructive">
  <quiet-icon name="trash"></quiet-icon>
</quiet-button>

<quiet-button icon-label="Close" appearance="text">
  <quiet-icon name="x"></quiet-icon>
</quiet-button>

Toggle buttons Jump to heading #

Create a toggle button by adding the toggle="off" attribute. To make it active by default, use toggle="on" instead. An indicator is shown to make it obvious when the toggle is selected.

<quiet-button variant="default" toggle="off" icon-label="Filter">
  <quiet-icon name="filter"></quiet-icon>
</quiet-button>

<quiet-button variant="primary" toggle="off" icon-label="Alarm">
  <quiet-icon name="bell"></quiet-icon>  
</quiet-button>

<quiet-button variant="destructive" toggle="off" icon-label="Record">
  <quiet-icon name="camera"></quiet-icon>
</quiet-button>

<quiet-button appearance="text" toggle="off" icon-label="Mute">
  <quiet-icon name="volume-3"></quiet-icon>
</quiet-button>

Loading buttons Jump to heading #

To show the button in a loading state, add the loading attribute. When a button is loading, it is effectively disabled and click events will not be emitted.

<quiet-button loading>
  I'm loading
</quiet-button>

Disabling Jump to heading #

To disable a button, add the disabled attribute. When a button is disabled, the click event will not be emitted.

<quiet-button disabled>Regular button</quiet-button>
<quiet-button href="https://example.com/" disabled>Link button</quiet-button>

Adding a dropdown caret Jump to heading #

A caret can be shown to indicate the button opens a dropdown menu by adding the with-caret attribute.

<quiet-button with-caret>Dropdown</quiet-button>

Listening for long press Jump to heading #

You can detect long presses by listening to the quiet-long-press event. The event is dispatched when the button is clicked or tapped and held for 700 milliseconds.

You can determine if the initiating event was a click (pointer) or tap (touch) by looking at event.detail.type. You can also look at event.detail.originalEvent to get the coordinates and other details.

<quiet-button id="button__long-press">Press and hold</quiet-button>

<script>
  const button = document.getElementById('button__long-press');

  button.addEventListener('quiet-long-press', async event => {
    // Log the coordinates and the type of event that initiated the 
    // long press, i.e. pointer (mouse) or touch (tap)
    const type = event.detail.type;
    const { clientX, clientY } = event.detail.originalEvent;
    
    console.log(`${type} at ${parseInt(clientX)}×${parseInt(clientY)}`);
    
    // Animate the button
    button.animate([
      { scale: 1, offset: 0 },
      { scale: 1.2, offset: 0.1 },
      { scale: 1, offset: 1 }
    ], {
      duration: 500,
      easing: 'linear'
    });
  });
</script>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/button/button.js';

import '@quietui/quiet/dist/components/button/button.js';

Slots Jump to heading #

Button supports the following slots. Learn more about using slots

Properties Jump to heading #

Button has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Events Jump to heading #

Button dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

CSS parts Jump to heading #

Button exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Custom States Jump to heading #

Button has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states

Dependencies Jump to heading #

Button automatically imports the following elements. Sub-dependencies are also included in this list.

• <quiet-icon>
• <quiet-spinner>