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 lets you group multiple Button components together in a unified block. It supports different styles, sizes, and layouts, making it easy to build toolbars, navigation links, or action button sets. It keeps buttons well-aligned with consistent spacing and styling, helping you create a clean and structured user interface.
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 that arranges buttons vertically instead of side by side. This is helpful for mobile or narrow screens where space is limited. To use it, set the stacked prop 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 gives all buttons a bordered look with a transparent background. It’s useful when you want a lighter, less prominent style while keeping a consistent design.
<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 sets the size of all buttons in the group, keeping them consistent. You can use predefined values like 'xs', 'sm', 'md', 'lg', or 'xl' to control the button dimensions.
<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 can stack buttons vertically instead of placing them side by side. This is useful for mobile or narrow screens. To enable it, set the stacked prop 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.