Button Group

The Button Group component allows you to combine multiple buttons into a cohesive unit. It organizes and presents related actions in a visually appealing and user-friendly manner.

Setting Up Your Button Group

Step 1: Enter Buttons Info:

• Start by adding the buttons that will make up your group. For each button, you can customize:

  • Label: The text displayed on the button.

  • Icon Name: Choose an icon to accompany the label (optional).

  • Variant: Select a visual style for the button (e.g., base, neutral, brand, destructive).

  • And more: Explore the button properties to customize its appearance and behavior further.

Step 2: Display as a Row (Optional):

• Control the arrangement of your buttons. By default, buttons in a group are stacked vertically. Enable the "Display as a Row" toggle to arrange them horizontally.

Step 3: Button Menu (Optional):

• Manage button visibility and optimize space. If you have many buttons, you can use the "Button Menu" feature to create a dropdown menu that contains additional buttons. This helps keep your interface clean and organized while providing access to all available actions.

  • Customize the Menu Button: Configure the label, icon, and button variant that triggers the dropdown menu.

  • Control Visible Buttons: Specify the number of buttons that should be visible by default. Any remaining buttons will be placed in the dropdown menu.

Why Use the Button Group Component?

• Organize Actions: Group related actions together for a more intuitive user experience.

• Improve Visual Appeal: Present buttons in a visually appealing and organized manner.

• Optimize Space: Use the menu to manage many buttons without cluttering the interface.

• Enhance Consistency: Maintain a consistent style and layout for buttons across your application.

Example Use Cases

• Toolbar: Create a toolbar with buttons for common actions like "New," "Edit," "Delete," and "Save."

• Navigation: Group navigation buttons together for easy access to different sections of your application.

• Form Actions: Combine "Submit" and "Cancel" buttons in a visually cohesive unit.

• Workflow Actions: Present a set of actions related to a specific workflow or process.

By effectively using the Button Group component, you can create user-friendly interfaces that streamline interactions and guide users towards desired actions