← Back to Components

QdsIconButton

A flexible button component that displays an icon from PrimeIcons.

Overview

The qds-icon-button component is a custom element that provides a button with a customizable icon. Unlike fixed-icon buttons like qds-settings-button or qds-help-button, this component accepts any PrimeIcons class as an attribute, making it suitable for various use cases without creating a new component for each icon.

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>

API Reference

Attributes

• icon - The PrimeIcons class name (e.g., “pi-cog”, “pi-home”, “pi-user”)

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.