QdsIconButton

A flexible button component that displays a PrimeIcons or Lucide icon.

Overview

The qds-icon-button component accepts the named values emitted by qds-icon-picker: prime:pi-* and lucide:*. Existing pi-* values remain supported.

Usage

To use the qds-icon-button component, include it in your HTML with the icon attribute:

<qds-icon-button icon="pi-cog"></qds-icon-button>
<qds-icon-button icon="pi-home"></qds-icon-button>
<qds-icon-button icon="pi-search"></qds-icon-button>
<qds-icon-button icon="lucide:search"></qds-icon-button>

API Reference

Attributes

• icon - A named icon (prime:pi-cog or lucide:settings), or a legacy PrimeIcons class (pi-cog)

CSS Parts

• button - The button container.
• icon - The icon element.

Events

• click - When the button is clicked.

Example

<qds-icon-button icon="pi-download"></qds-icon-button>
<script>
  const button = document.querySelector('qds-icon-button');
  button.addEventListener('click', () => {
    console.log('Button clicked');
  });

  // Change icon dynamically
  setTimeout(() => {
    button.setAttribute('icon', 'pi-check');
  }, 2000);
</script>

Available Icons

The component supports all PrimeIcons classes. Some commonly used icons include:

• Navigation: pi-home, pi-arrow-left, pi-arrow-right, pi-chevron-up, pi-chevron-down
• Actions: pi-plus, pi-minus, pi-times, pi-check, pi-trash, pi-pencil
• UI: pi-search, pi-bars, pi-cog, pi-bell, pi-user
• Media: pi-play, pi-pause, pi-stop, pi-volume-up, pi-volume-down
• File: pi-download, pi-upload, pi-file, pi-folder

For a complete list of available icons, visit the PrimeIcons documentation.