Icon Button

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

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
  emphasis="neutral"
  icon="ExternalLink"
  q-icon-button
  variant="fill"
></button>
<button
  emphasis="primary"
  icon="ExternalLink"
  q-icon-button
  variant="fill"
></button>
<button
  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 icon="ExternalLink" q-icon-button variant="fill"></button>
<button icon="ExternalLink" q-icon-button variant="outline"></button>
<button 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
  emphasis="primary"
  icon="ExternalLink"
  q-icon-button
  size="sm"
  variant="fill"
></button>
<button
  emphasis="primary"
  icon="ExternalLink"
  q-icon-button
  size="md"
  variant="fill"
></button>
<button
  emphasis="primary"
  icon="ExternalLink"
  q-icon-button
  size="lg"
  variant="fill"
></button>

Variant Combinations

Brand

FillOutlineGhost

Contrast Colors

Brand

API

q-icon-button

Entity not found: IconButtonComponent

Learn more

Button Group

Inline Icon Button