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.

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.

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.

<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>

Compact Density

Use the density property to reduce the padding and height of the button. The options are default and compact.

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

Variant Combinations

This demo displays all combinations of variants and emphasis options, including the disabled state for each variant.

FillOutlineGhost

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

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

@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 {}

Shape

Control the shape of the icon button with the shape prop. The default shape is square.

<button
  aria-label="External Link"
  icon="ExternalLink"
  q-icon-button
  shape="square"
></button>
<button
  aria-label="External Link"
  icon="ExternalLink"
  q-icon-button
  shape="rounded"
></button>

Contrast Colors

Use white-persistent emphasis on dark backgrounds and black-persistent emphasis on light backgrounds. These colors remain constant regardless of the active theme.

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

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

@Component({
  imports: [ButtonModule],
  providers: [provideIcons({ExternalLink})],
  selector: "icon-button-contrast-demo",
  template: `
    <div class="flex flex-col gap-8">
      <div class="bg-persistent-black flex gap-8 rounded-md p-3">
        <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>

      <div class="bg-persistent-white flex gap-8 rounded-md p-3">
        <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 {}

Inverse Contrast

To flip contrast against the active theme, set emphasis to inverse.

<button
  aria-label="Navigate"
  emphasis="inverse"
  icon="ExternalLink"
  q-icon-button
  variant="fill"
></button>
<button
  aria-label="Navigate"
  emphasis="inverse"
  icon="ExternalLink"
  q-icon-button
  variant="outline"
></button>
<button
  aria-label="Navigate"
  emphasis="inverse"
  icon="ExternalLink"
  q-icon-button
  variant="ghost"
></button>

API

q-icon-button

Prop	Type	Default
density The density of the button. Governs padding and height.	\| 'default' \| 'compact'	'default'
disabled Controls whether the component is interactive. When `true`, pointer/focus events are blocked, and the component is visually dimmed.	boolean	false
emphasis The variant of the button.	\| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent' \| 'inverse'	'neutral'
icon lucide-angular icon.	\| LucideIconData \| string
shape Governs the shape of the icon button.	\| 'square' \| 'rounded'	'square'
size The size of the component and its icons.	\| 'sm' \| 'md' \| 'lg'	'md'
variant The variant of the button.	\| 'fill' \| 'ghost' \| 'outline'	'fill'

density

Type

| 'default'
| 'compact'

Description

The density of the button. Governs padding and height.

disabled

Type

boolean

Description

Controls whether the component is interactive. When true, pointer/focus events are blocked, and the component is visually dimmed.

emphasis

Type

| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'
| 'inverse'

Description

The variant of the button.

icon

Type

| LucideIconData
| string

Description

lucide-angular icon.

shape

Type

| 'square'
| 'rounded'

Description

Governs the shape of the icon button.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the component and its icons.

variant

Type

| 'fill'
| 'ghost'
| 'outline'

Description

The variant of the button.

Last updated on Apr 24, 2026 by Ryan Bower

Icon

Inline Icon Button