# UIButtonRowElement

***

Represents a row of buttons.

It is useful to group buttons together and align them.

Unlike on [UIGridContainerElement](https://developers.felt.com/js-sdk-api-reference/ui/uigridcontainerelement), buttons do not expand to fill the container. Instead, they use the space they need and are wrapped to the next line when they overflow.

### Label

A label can be added to the button row using the `label` property.

<figure><img src="https://1346268847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eksRydsZ8lvtEIxgbY5%2Fuploads%2Fgit-blob-d091aa2c015b7090d05e2fb82b558b14ea11e264%2Fbutton-row-label.png?alt=media" alt="Label"><figcaption><p>Label</p></figcaption></figure>

```typescript
{
  type: "ButtonRow",
  label: "Zoom control",
  items: [
    { type: "Button", label: "Increase", onClick: () => {} },
    { type: "Button", label: "Decrease", onClick: () => {} },
  ],
}
```

### Alignment

It is possible to align the button row to the start or end of the container using the `align` property.

#### Start alignment

<figure><img src="https://1346268847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eksRydsZ8lvtEIxgbY5%2Fuploads%2Fgit-blob-d16bbc6c02b5d35834393cb6e1911c3dac2840dc%2Fbutton-row-start-alignment.png?alt=media" alt="Start alignment"><figcaption><p>Start alignment</p></figcaption></figure>

```typescript
{
  type: "ButtonRow",
  align: "start", // default value
  items: [
    { type: "Button", label: "Button 1", onClick: () => {} },
    { type: "Button", label: "Button 2", onClick: () => {} },
  ],
}
```

#### End alignment

<figure><img src="https://1346268847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eksRydsZ8lvtEIxgbY5%2Fuploads%2Fgit-blob-bfb218753ce4b6ec836727ebb414e617406fe44c%2Fbutton-row-end-alignment.png?alt=media" alt="End alignment"><figcaption><p>End alignment</p></figcaption></figure>

```typescript
{
  type: "ButtonRow",
  align: "end",
  items: [
    { type: "Button", label: "Button 1", onClick: () => {} },
    { type: "Button", label: "Button 2", onClick: () => {} },
  ],
}
```

### Overflow

When buttons overflow the container, they are wrapped to the next line.

<figure><img src="https://1346268847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eksRydsZ8lvtEIxgbY5%2Fuploads%2Fgit-blob-a14c8c9eaea4953dccc8caa2fe46f571c273b678%2Fbutton-row-overflow.png?alt=media" alt="Overflow"><figcaption><p>Overflow</p></figcaption></figure>

```typescript
{
  type: "ButtonRow",
  items: [
    { type: "Button", label: "Button with a very long text", onClick: () => {} },
    { type: "Button", label: "Button 2", onClick: () => {} },
    { type: "Button", label: "Button 3", onClick: () => {} },
  ],
}
```

### With Grid container

[UIGridContainerElement](https://developers.felt.com/js-sdk-api-reference/ui/uigridcontainerelement), as a generic container, can render [UIButtonRowElement](https://developers.felt.com/js-sdk-api-reference/ui/uibuttonrowelement) as well.

In this example, the combination of [UIGridContainerElement](https://developers.felt.com/js-sdk-api-reference/ui/uigridcontainerelement) and [UIButtonRowElement](https://developers.felt.com/js-sdk-api-reference/ui/uibuttonrowelement) is used to layout a footer where the buttons are aligned to the end of the container and the text is at the start.

<figure><img src="https://1346268847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eksRydsZ8lvtEIxgbY5%2Fuploads%2Fgit-blob-7c6c9d32ce11344023b13eabb0ba17fe8396d80e%2Fbutton-row-with-grid-container.png?alt=media" alt="With Grid container"><figcaption><p>With Grid container</p></figcaption></figure>

```typescript
{
  type: "Grid",
  grid: "auto-flow / 1fr auto",
  rowItemsJustify: "space-between",
  rowItemsAlign: "center",
  items: [
    { type: "Text", content: "Continue?" },
    {
      type: "ButtonRow",
      align: "end",
      items: [
        { type: "Button", variant: "transparent", label: "Cancel", onClick: () => {} },
        { type: "Button", variant: "filled", tint: "primary", label: "Continue", onClick: () => {} },
      ]
    },
  ],
}
```

## Properties

### type

> **type**: `"ButtonRow"`

***

### items

> **items**: [`UIButtonElement`](https://developers.felt.com/js-sdk-api-reference/ui/uibuttonelement)\[]

The items to add to the button row.

***

### id

> **id**: `string`

The ID of the element.

***

### align?

> `optional` **align**: `"start"` | `"end"`

The alignment of the button row.

#### Default Value

`"start"`

***

### onCreate()?

> `optional` **onCreate**: (`args`: { `id`: `string`; }) => `void`

A function to call when the element is created.

#### Parameters

| Parameter | Type                | Description                           |
| --------- | ------------------- | ------------------------------------- |
| `args`    | { `id`: `string`; } | The arguments passed to the function. |
| `args.id` | `string`            | The id of the element.                |

#### Returns

`void`

***

### onDestroy()?

> `optional` **onDestroy**: (`args`: { `id`: `string`; }) => `void`

A function to call when the element is destroyed.

#### Parameters

| Parameter | Type                | Description                           |
| --------- | ------------------- | ------------------------------------- |
| `args`    | { `id`: `string`; } | The arguments passed to the function. |
| `args.id` | `string`            | The id of the element.                |

#### Returns

`void`

***

### label?

> `optional` **label**: `string`

Label text to display above the element and used for screen readers.