UIButtonRowElement


Represents a row of buttons.

It is useful to group buttons together and align them.

Unlike on 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.

Label
Label
{
  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

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

End alignment

End alignment
End alignment
{
  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.

Overflow
Overflow
{
  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, as a generic container, can render UIButtonRowElement as well.

In this example, the combination of UIGridContainerElement and 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.

With Grid container
With Grid container
{
  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[]

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.

Last updated

Was this helpful?