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>

All Styles

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>

API

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

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.

Overview

Button Group