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
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
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?