Button Layouts

In real-world business scenarios, we often need to group multiple action buttons together.

Tabler provides three semantically different button containers to control spacing, alignment, and conjoined grouping.

Button List

TButtonList is the most common multi-button container, maintaining even spacing between buttons.

Adding distinct theme colors makes it easy to draw user attention to the primary action.

<TButtonList>
  <TButton color="success">Save changes</TButton>
  <TButton>Save and continue</TButton>
  <TButton color="danger">Cancel</TButton>
</TButtonList>

When the container width is insufficient (e.g., on mobile devices), buttons inside TButtonList will automatically wrap to the next line while maintaining consistent spacing — no manual media queries needed.

View Code

<TButtonList>
    <TButton>One</TButton>
  <TButton>Two</TButton>
  <TButton>Three</TButton>
  <TButton>Four</TButton>
  <TButton>Five</TButton>
  <TButton>Six</TButton>
  <TButton>Seven</TButton>
  <TButton>Eight</TButton>
  <TButton>Nine</TButton>
  <TButton>Ten</TButton>
  <TButton>Eleven</TButton>
  <TButton>Twelve</TButton>
  <TButton>Thirteen</TButton>
  <TButton>Fourteen</TButton>
  <TButton>Fifteen</TButton>
  <TButton>Sixteen</TButton>
  <TButton>Seventeen</TButton>
  <TButton>Eighteen</TButton>
  <TButton>Nineteen</TButton>
</TButtonList>

Use the justify prop to adjust button alignment and place them in the most suitable position.

<TButtonList justify="center">
  <TButton>Save and continue</TButton>
  <TButton color="primary">Save changes</TButton>
</TButtonList>

<TButtonList justify="end">
  <TButton>Save and continue</TButton>
  <TButton color="primary">Save changes</TButton>
</TButtonList>

If you need to push a specific button (e.g., "Delete") to the far left while keeping primary actions on the right, combine it with Bootstrap's native me-auto utility class.

<TButtonList justify="end">
  <TButton color="danger" outline class="me-auto">Delete</TButton>
  <TButton>Save and continue</TButton>
  <TButton color="primary">Save changes</TButton>
</TButtonList>

Button Group

TButtonGroup is used for grouping closely related buttons (such as toggle options or pagination controls), merging their borders into a cohesive visual unit.

<TButtonGroup>
  <TButton>1st</TButton>
  <TButton>2nd</TButton>
  <TButton>3rd</TButton>
  <TButton>4th</TButton>
</TButtonGroup>

Set the vertical prop to arrange the button group vertically instead of horizontally.

<TButtonGroup vertical>
  <TButton>Top</TButton>
  <TButton>Middle</TButton>
  <TButton>Bottom</TButton>
</TButtonGroup>

Button Actions

TButtonActions is a container specifically designed for compact icon buttons with the action prop.

It is typically used in the top-right title bar of a card (Card), or in the action column of a data table.

Show Code

<TButtonActions>
  <TButton action>
    <IconRefresh class="icon icon-1"></IconRefresh>
  </TButton>
  <TButton action>
    <IconChevronUp class="icon icon-1"></IconChevronUp>
  </TButton>
  <TButton action>
    <IconDotsVertical class="icon icon-1"></IconDotsVertical>
  </TButton>
  <TButton action>
    <IconX class="icon icon-1"></IconX>
  </TButton>
</TButtonActions>

API

TButtonList Props

Prop	Description	Type	Default
justify	Horizontal alignment of inner buttons. Maps to Flexbox justify-content.	'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'	'start'

TButtonGroup Props

Prop	Description	Type	Default
vertical	Whether to arrange the button group vertically instead of horizontally.	boolean	false

Container Slots

All three container components (TButtonList, TButtonGroup, TButtonActions) support only the default slot for placing TButton or other HTML elements.