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.

{
  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

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

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.

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

{
  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

Returns

void

onDestroy()?

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

A function to call when the element is destroyed.

Parameters

Returns

void

label?

optional label: string

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