---
title: QuanticNumberButton
slug: latest-utility-number-button
canonical_url: https://docs.coveo.com/en/quantic/latest/reference/utility-components/utility-number-button/
collection: quantic
source_format: adoc
---
# QuanticNumberButton

> **Note**
>
> This component was introduced in version `1.6.1`.

The `QuanticNumberButton` component is used internally to display a button in a set of buttons with numeric labels.

## Example

```html
<c-quantic-number-button number="1" selected onquantic__select={select}></c-quantic-number-button>
```

## Properties

--
|===
| Property | Attribute | Description | Type | Default

| `number` _(required)_
| `number`
a| The number to display as button label.
| `number`
|

| `selected` _(required)_
| `selected`
a| The selected number in the set of buttons.
| `number`
|

| `ariaLabelValue` _(required)_
| `aria-label-value`
a| The value for aria-label.
| `string`
|

|===
--

## Custom events

The component fires the following custom event:

* `quantic__select`

## XML configuration file elements

The following XML configuration file elements apply (see [XML Configuration File Elements](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_configuration_tags)).

--
|===
| Metadata | Value

| `apiVersion` | `53.0`
| `isExposed` | `false`
|===
--