Icon Button

Icon buttons perform an action when clicked and visually represent the action through an icon, combining button functionality with visual symbolism.

import {IconButton} from "@qualcomm-ui/angular/button"

Accessibility Guidelines

Icon-only buttons rely on visual cues that screen readers cannot access. Use aria-label or aria-labelledby to give every icon-only button an accessible name so its purpose is clear to assistive technologies.

Examples

Emphasis

Buttons can have different "Emphasis" which affects the color of the button: fill, outline, and ghost. Customize these with the emphasis property.

Brand

Neutral

Primary

Danger

<button
  aria-label="External Link"
  emphasis="neutral"
  icon="ExternalLink"
  q-icon-button
  variant="fill"
></button>
<button
  aria-label="External Link"
  emphasis="primary"
  icon="ExternalLink"
  q-icon-button
  variant="fill"
></button>
<button
  aria-label="External Link"
  emphasis="danger"
  icon="ExternalLink"
  q-icon-button
  variant="fill"
></button>

Variants

Buttons come in three variants: fill, outline, and ghost. Customize these with the variant property.

Brand

Fill

Outline

Ghost

<button
  aria-label="External Link"
  icon="ExternalLink"
  q-icon-button
  variant="fill"
></button>
<button
  aria-label="External Link"
  icon="ExternalLink"
  q-icon-button
  variant="outline"
></button>
<button
  aria-label="External Link"
  icon="ExternalLink"
  q-icon-button
  variant="ghost"
></button>

Sizes and Icons

Customize size using the size property. QUI buttons come with built-in support for lucide-angular icons.

Brand

<button
  aria-label="External Link"
  emphasis="primary"
  icon="ExternalLink"
  q-icon-button
  size="sm"
  variant="fill"
></button>
<button
  aria-label="External Link"
  emphasis="primary"
  icon="ExternalLink"
  q-icon-button
  size="md"
  variant="fill"
></button>
<button
  aria-label="External Link"
  emphasis="primary"
  icon="ExternalLink"
  q-icon-button
  size="lg"
  variant="fill"
></button>

Variant Combinations

Brand

FillOutlineGhost

import {Component} from "@angular/core"
import {Search} from "lucide-angular"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"

@Component({
  imports: [ButtonModule],
  providers: [provideIcons({Search})],
  selector: "icon-button-variant-combinations-demo",
  template: `
    <div class="grid grid-cols-3 grid-rows-4 gap-x-8 gap-y-5">
      <span class="text-neutral-primary font-heading-xs">Fill</span>
      <span class="text-neutral-primary font-heading-xs">Outline</span>
      <span class="text-neutral-primary font-heading-xs">Ghost</span>

      <button
        aria-label="External Link"
        emphasis="neutral"
        icon="Search"
        q-icon-button
        variant="fill"
      ></button>
      <button
        aria-label="External Link"
        emphasis="neutral"
        icon="Search"
        q-icon-button
        variant="outline"
      ></button>
      <button
        aria-label="External Link"
        emphasis="neutral"
        icon="Search"
        q-icon-button
        variant="ghost"
      ></button>

      <button
        aria-label="External Link"
        emphasis="primary"
        icon="Search"
        q-icon-button
        variant="fill"
      ></button>
      <button
        aria-label="External Link"
        emphasis="primary"
        icon="Search"
        q-icon-button
        variant="outline"
      ></button>
      <button
        aria-label="External Link"
        emphasis="primary"
        icon="Search"
        q-icon-button
        variant="ghost"
      ></button>

      <button
        aria-label="External Link"
        emphasis="danger"
        icon="Search"
        q-icon-button
        variant="fill"
      ></button>
      <button
        aria-label="External Link"
        emphasis="danger"
        icon="Search"
        q-icon-button
        variant="outline"
      ></button>
      <button
        aria-label="External Link"
        emphasis="danger"
        icon="Search"
        q-icon-button
        variant="ghost"
      ></button>

      <button
        aria-label="External Link"
        disabled
        icon="Search"
        q-icon-button
        variant="fill"
      ></button>
      <button
        aria-label="External Link"
        disabled
        icon="Search"
        q-icon-button
        variant="outline"
      ></button>
      <button
        aria-label="External Link"
        disabled
        icon="Search"
        q-icon-button
        variant="ghost"
      ></button>
    </div>
  `,
})
export class IconButtonVariantCombinationsDemo {}

Contrast Colors

Brand

import {Component} from "@angular/core"
import {ExternalLink} from "lucide-angular"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"

@Component({
  imports: [ButtonModule],
  providers: [provideIcons({ExternalLink})],
  selector: "icon-button-contrast-demo",
  template: `
    <div class="grid grid-cols-3 grid-rows-2 gap-x-8 gap-y-5">
      <button
        aria-label="External Link"
        emphasis="white-persistent"
        icon="ExternalLink"
        q-icon-button
        variant="fill"
      ></button>
      <button
        aria-label="External Link"
        emphasis="white-persistent"
        icon="ExternalLink"
        q-icon-button
        variant="outline"
      ></button>
      <button
        aria-label="External Link"
        emphasis="white-persistent"
        icon="ExternalLink"
        q-icon-button
        variant="ghost"
      ></button>

      <div class="col-span-3 grid grid-cols-3 gap-x-8 gap-y-5 bg-white p-2">
        <button
          aria-label="External Link"
          emphasis="black-persistent"
          icon="ExternalLink"
          q-icon-button
          variant="fill"
        ></button>
        <button
          aria-label="External Link"
          emphasis="black-persistent"
          icon="ExternalLink"
          q-icon-button
          variant="outline"
        ></button>
        <button
          aria-label="External Link"
          emphasis="black-persistent"
          icon="ExternalLink"
          q-icon-button
          variant="ghost"
        ></button>
      </div>
    </div>
  `,
})
export class IconButtonContrastDemo {}

API

q-icon-button

Entity not found: IconButtonComponent

Learn more

Button Group

Inline Icon Button