← Back to Components

Feedback Button Web Component

A feedback button component for collecting user comments and suggestions in user interfaces.

Features

• Clean, minimalist design with a feedback icon
• Configurable link target
• Responsive design that works in desktop and mobile views
• Shows descriptive label in mobile menu views
• Customizable through CSS variables

Installation

Include the component in your project:

<script src="https://cdn.q360.ai/assets/components/feedback-button/qds-feedback-button.js" type="module"></script>

Or import it in your JavaScript:

import "https://cdn.q360.ai/assets/components/feedback-button/qds-feedback-button.js";

You can also load all components at once:

<script src="https://cdn.q360.ai/assets/components/index.js" type="module"></script>

Usage

Basic usage:

<qds-feedback-button></qds-feedback-button>

With attributes:

<qds-feedback-button 
  href="https://feedback.example.com" 
  target="_blank">
</qds-feedback-button>

Using in a main toolbar:

<qds-main-toolbar>
  <div slot="right">
    <qds-notification-tray count="3"></qds-notification-tray>
    <qds-theme-switch></qds-theme-switch>
    <qds-help-button></qds-help-button>
    <qds-feedback-button href="https://feedback.example.com"></qds-feedback-button>
    <qds-user-avatar name="John Doe"></qds-user-avatar>
  </div>
</qds-main-toolbar>

Attributes

Attribute	Type	Description	Default
href	String	URL that the feedback button links to	“#”
target	String	Where to open the link (_blank, _self, etc.)	“_blank”

Events

Event	Description	Detail
click	Fired when the button is clicked	{ href: string }

Styling

The component can be styled using CSS variables:

qds-feedback-button {
  --button-color: #1a73e8;
  --button-hover-bg: rgba(26, 115, 232, 0.1);
}

CSS Variables

Variable	Description	Default
--button-color	Color of the button	inherit
--button-hover-bg	Background color on hover	rgba(0, 0, 0, 0.05)

CSS Parts

The component exposes the following parts for advanced styling:

/* Style the button */
qds-feedback-button::part(button) {
  /* custom styles */
}

/* Style the icon */
qds-feedback-button::part(icon) {
  /* custom styles */
}

Responsive Behavior

• In desktop view, only the icon is shown
• In mobile view (inside a mobile menu), a descriptive label appears next to the icon

Browser Support

This component uses standard Web Component APIs and works in all modern browsers that support Custom Elements v1.