Button Row
Description
The Button Row component is designed to display a group of buttons in a horizontal layout. It allows for flexible arrangement of buttons with customizable alignment options. This component is ideal for creating action areas, navigation bars, or any section requiring multiple call-to-action elements.
Installation
bash
sabaccui add buttonRow
Usage
Here are examples of how to use the Button Row component with different alignments:
Left-aligned buttons (default)
Center-aligned buttons
Right-aligned buttons
Preview
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
buttons | bloks | An array of button components to be displayed in the row. Only accepts components of type "button". | [] |
align | option | Determines the alignment of the buttons within the row. Options: 'left', 'center', 'right'. | left |
Related Components
Notes
- The component uses a flex layout to arrange buttons horizontally.
- Buttons are wrapped with a gap of 1.5rem (24px) between them.
- The alignment is responsive, with right alignment becoming effective from the medium breakpoint and above.
- The component adds a top margin of 1rem (16px) to create spacing from elements above it.
Best Practices:
- Use consistent button styles within a Button Row for a cohesive look.
- Consider the number of buttons and available space when choosing alignment.
- For mobile responsiveness, left or center alignment is recommended as right alignment only takes effect on medium screens and above.
- Limit the number of buttons in a row to maintain readability and prevent overcrowding, especially on smaller screens.