Button

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

Examples

Variants

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

Brand

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.

Brand

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.

Brand

<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

Brand

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.

Forms

Pitfalls

Button Group