Button

Buttons let users perform actions instantly, such as submitting forms, navigating pages, or triggering app functions. Built with comprehensive state management and semantic color coding, they communicate purpose and priority while maintaining consistent behavior across desktop and mobile environments.

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

Examples

Variants

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

Fill

Outline

Ghost

<button
  emphasis="primary"
  q-button
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>
<button
  emphasis="primary"
  q-button
  startIcon="ExternalLink"
  variant="outline"
>
  Action
</button>
<button
  emphasis="primary"
  q-button
  startIcon="ExternalLink"
  variant="ghost"
>
  Action
</button>

Emphasis

Buttons can have different emphasis which affects the color of the button.

Neutral

Primary

Danger

<button
  emphasis="neutral"
  q-button
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>
<button
  emphasis="primary"
  q-button
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>
<button
  emphasis="danger"
  q-button
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>

Sizes and Icons

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

<button
  emphasis="primary"
  q-button
  size="sm"
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>
<button
  emphasis="primary"
  q-button
  size="md"
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>
<button
  emphasis="primary"
  q-button
  size="lg"
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>

Compact Density

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

<button
  density="compact"
  emphasis="primary"
  q-button
  size="sm"
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>
<button
  density="compact"
  emphasis="primary"
  q-button
  size="md"
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>
<button
  density="compact"
  emphasis="primary"
  q-button
  size="lg"
  startIcon="ExternalLink"
  variant="fill"
>
  Action
</button>

Variant Combinations

This grid shows all button combinations across variants and emphasis levels. The bottom row demonstrates the disabled state, which grays out the button regardless of variant or emphasis.

FillOutlineGhost

<button emphasis="primary" q-button variant="fill">Action</button>
<button emphasis="primary" q-button variant="outline">Action</button>
<button emphasis="primary" q-button variant="ghost">Action</button>
<button emphasis="neutral" q-button variant="fill">Action</button>
<button emphasis="neutral" q-button variant="outline">Action</button>
<button emphasis="neutral" q-button variant="ghost">Action</button>
<button emphasis="danger" q-button variant="fill">Action</button>
<button emphasis="danger" q-button variant="outline">Action</button>
<button emphasis="danger" q-button variant="ghost">Action</button>
<button disabled emphasis="danger" q-button variant="fill">Action</button>
<button disabled emphasis="danger" q-button variant="outline">
  Action
</button>
<button disabled emphasis="danger" q-button variant="ghost">
  Action
</button>

Contrast Colors

Use white-persistent for buttons on dark backgrounds and black-persistent for buttons on light backgrounds. These emphasis values maintain consistent contrast regardless of the active theme.

<div class="bg-persistent-black flex gap-8 rounded-md p-3">
  <button emphasis="white-persistent" q-button variant="fill">
    Action
  </button>
  <button emphasis="white-persistent" q-button variant="outline">
    Action
  </button>
  <button emphasis="white-persistent" q-button variant="ghost">
    Action
  </button>
</div>

<div class="bg-persistent-white flex gap-8 rounded-md p-3">
  <button emphasis="black-persistent" q-button variant="fill">
    Action
  </button>
  <button emphasis="black-persistent" q-button variant="outline">
    Action
  </button>
  <button emphasis="black-persistent" q-button variant="ghost">
    Action
  </button>
</div>

Inverse Contrast

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

<button emphasis="inverse" q-button variant="fill">Action</button>
<button emphasis="inverse" q-button variant="outline">Action</button>
<button emphasis="inverse" q-button variant="ghost">Action</button>

For a button that opens a dropdown, use q-menu-button for a labeled trigger or q-menu-icon-button for an icon-only trigger.

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'
endIcon lucide-angular icon, positioned after the label.	\| LucideIconData \| string

size The size of the component and its icons.	\| 'sm' \| 'md' \| 'lg'	'md'
startIcon lucide-angular icon, positioned before the label.	\| LucideIconData \| string

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.

endIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned after the label.

size

Type

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

Description

The size of the component and its icons.

startIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned before the label.

variant

Type

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

Description

The variant of the button.

Last updated on Jun 3, 2026 by Olaf Kappes

Breadcrumbs

Button Group

Button

Examples

Variants

Emphasis

Sizes and Icons

Compact Density

Variant Combinations

Contrast Colors

Inverse Contrast

Menu Button

Split Button

API

q-button