ButtonLayout

The ButtonLayout component allows you to group multiple buttons together, either horizontally or vertically. It is useful for organizing related actions.

Usage

import { Button, ButtonLayout } from '@harnessio/ui/components'

return (
  <ButtonLayout horizontalAlign="start">
    <Button>Button primary</Button>
    <Button variant="secondary">Button secondary</Button>
    <Button variant="outline">Button outline</Button>
  </ButtonLayout>

  <ButtonLayout orientation="vertical">
    <Button>Button primary</Button>
    <Button variant="secondary">Button secondary</Button>
    <Button variant="outline">Button outline</Button>
  </ButtonLayout>

  <ButtonLayout.Root>
    <ButtonLayout.Primary>
      <Button>Button primary</Button>
    </ButtonLayout.Primary>
    <ButtonLayout.Secondary>
      <Button variant="secondary">Button secondary</Button>
    </ButtonLayout.Secondary>
  </ButtonLayout.Root>
)

Anatomy

All parts of the ButtonLayout component can be imported and composed as required.

<ButtonLayout.Root>
  <ButtonLayout.Primary />
  <ButtonLayout.Secondary />
</ButtonLayout.Root>

Layout Orientation

The ButtonLayout component accepts an orientation prop, which defines the layout direction: either horizontal or vertical.

Horizontal Alignment

When orientation is horizontal, the horizontalAlign prop controls alignment. Use start to align buttons to the left, or end to align them to the right.

Primary and secondary button groups

The component provides ButtonLayout.Primary and ButtonLayout.Secondary compositions for grouping buttons.

When orientation is set to horizontal:

• Primary aligns buttons to the right
• Secondary aligns buttons to the left

When orientation is set to horizontal and horizontalAlign is set to start:

• Primary aligns buttons to the left
• Secondary aligns buttons to the right

When orientation is set to vertical:

• Primary places buttons at the top
• Secondary places buttons at the bottom

API Reference

Root

The Root component serves as the main container for Button, ButtonLayout.Primary and ButtonLayout.Secondary components.

Prop	Required	Default	Type
children	true		ReactNode
orientation	false	horizontal	'horizontal' | 'vertical'
horizontalAlign	false	end	'start' | 'end'
className	false		string

Primary

ButtonLayout.Primary is placed on top when orientation is vertical

ButtonLayout.Primary appears on the right when orientation is horizontal

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Secondary

ButtonLayout.Secondary is placed on bottom when orientation is vertical

ButtonLayout.Secondary appears on the left when orientation is horizontal

Prop	Required	Default	Type
children	true		ReactNode
className	false		string