Helps you group multiple buttons together for a cohesive and organized layout. Ideal for presenting related actions or options side by side or vertically
About
The ButtonGroup component allows you to combine multiple Button components into a unified group. It supports various styles, sizes, and configurations, making it easy to create visually appealing and functional button groups. Whether you're creating a toolbar, a set of navigation links, or action buttons, the ButtonGroup ensures that the buttons are well-aligned and maintain a consistent spacing and styling. This component enhances the user interface by providing a structured way to present related buttons in a single, cohesive block.
Example
Import the Button component into your Svelte file. The following example shows how to use the button component!
<script>
import { ButtonGroup, Button } from 'theui-svelte';
</script>
<ButtonGroup>
<Button>Save</Button>
<Button>Edit</Button>
<Button>Delete</Button>
</ButtonGroup>In this example, the ButtonGroup wraps multiple Button components, aligning them neatly in a single row. This structure is useful for presenting related actions in a visually consistent manner.
Stacked Button
The ButtonGroup component supports a stacked layout, which vertically arranges the buttons instead of aligning them horizontally. This is useful when you want to display multiple actions in a column format, ideal for mobile or narrow screen designs.
To enable stacked buttons, use the stacked prop and set it to true.
<ButtonGroup stacked={true}> ... </ButtonGroup>In this example, the buttons are displayed one below the other, creating a clean and space-efficient vertical layout.
Outlined Button
The outline prop in the ButtonGroup component applies an outlined style to all buttons in the group, giving them a bordered appearance with a transparent background. This prop is useful for creating a distinct, less prominent button style while maintaining visual consistency.
<ButtonGroup outline={true}> ... </ButtonGroup>In this example, all buttons within the ButtonGroup have an outlined style, making them stand out with borders while keeping the background clear.
Group Button Sizing
The size prop in the ButtonGroup component controls the size of all buttons within the group. This prop ensures consistency in the button sizes, making it easier to maintain a cohesive design.
You can set the size prop to any predefined BUTTON_SIZE value, such as 'xs', 'sm', 'md', 'lg', or 'xl', to adjust the buttons' dimensions accordingly.
<ButtonGroup size="auto"> ... </ButtonGroup>
<ButtonGroup size="xs"> ... </ButtonGroup>
<ButtonGroup size="sm"> ... </ButtonGroup>
<ButtonGroup size="md"> ... </ButtonGroup>
<ButtonGroup size="lg"> ... </ButtonGroup>
<ButtonGroup size="xl"> ... </ButtonGroup>In this example, the buttons are rendered with an outline, providing a lighter, more elegant visual style.
Square Group Button
The ButtonGroup component supports a stacked layout, which vertically arranges the buttons instead of aligning them horizontally. This is useful when you want to display multiple actions in a column format, ideal for mobile or narrow screen designs.
To enable stacked buttons, use the stacked prop and set it to true.
<ButtonGroup square={true}> ... </ButtonGroup>In this example, the buttons are displayed one below the other, creating a clean and space-efficient vertical layout.
Rounded Button Control
The rounded prop controls the border-radius of the buttons within the ButtonGroup, allowing you to adjust the roundness of the button corners. You can choose from several options, such as "sm" for small rounded corners, "md" (default) for medium, "lg" for large, "xl" for extra-large, "full" for fully rounded corners, or "none" for no rounding at all.
<ButtonGroup rounded="none"> ... </ButtonGroup>
<ButtonGroup rounded="sm"> ... </ButtonGroup>
<ButtonGroup rounded="md"> ... </ButtonGroup>
<ButtonGroup rounded="lg"> ... </ButtonGroup>
<ButtonGroup rounded="xl"> ... </ButtonGroup>
<ButtonGroup rounded="full"> ... </ButtonGroup>In this example, the buttons in the ButtonGroup have large rounded corners. The default value for the rounded prop is "md", but you can customize it as per your design needs.
Button Group Variants
The variant prop in the ButtonGroup component allows you to choose between two button styles: bordered and flat. This prop customizes the visual separation between buttons in the group.
flat(default): Creating a seamless, flat appearance with no visual separation between buttons.bordered: Adds borders between the buttons, giving each button a distinct outline.
<ButtonGroup variant="flat"> ... </ButtonGroup>
<ButtonGroup variant="bordered"> ... </ButtonGroup>In the first example, the bordered variant adds visible borders between the buttons, while the second example uses the default flat variant for a smooth, border-less look.
Button Group Color
The color prop for the ButtonGroup component sets a unified color theme for all buttons within the group. This ensures a consistent and cohesive design. However, individual buttons can override this by using their own color prop, allowing for greater customization within the button group.
<ButtonGroup color="warning">
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button color="error">Button 3</Button>
<Button>Button 4</Button>
<Button>Button 5</Button>
</ButtonGroup>In this example, the size="lg" prop applies a large size to all buttons in the group, ensuring they appear uniformly larger for better emphasis or usability.
Button Group Theme
The theme prop controls the overall theme of the buttons within the ButtonGroup. It allows you to choose from three options: "default", "light", or "gradient". Each theme applies a different visual style to the buttons to match your design preferences.
Light Theme
The light theme gives the buttons a softer and lighter appearance, making them more subtle and minimal. You can also use the color prop with the light theme to further customize the button colors.
<ButtonGroup theme="light"> ... </ButtonGroup>
<ButtonGroup theme="light" color="info"> ... </ButtonGroup>Gradient Theme
The gradient theme applies a gradient background to the buttons, giving them a vibrant and dynamic look. To customize the gradient’s color scheme, use the color prop in combination with the gradient theme.
<ButtonGroup theme="gradient"> ... </ButtonGroup>
<ButtonGroup theme="gradient" gradientColor="success"> ... </ButtonGroup>Accessibility
The ButtonGroup component is designed with accessibility in mind, ensuring it can be easily used by all users, including those relying on assistive technologies.
ARIA Label
The ariaLabel prop allows you to provide a custom label for the button group, enhancing its accessibility. The default value is "Button group". You can specify a more descriptive label depending on the context or functionality of the button group.
<ButtonGroup ariaLabel="ARIA label"> ... </ButtonGroup>role="group" Attribute
The role="group" attribute is automatically included in the ButtonGroup component. This role helps assistive technologies understand that the buttons are part of a grouped set, improving the navigation and comprehension for users.