Group

Organize related buttons or badges together into a single, cohesive group

Group buttons or badges together to help users make choices or take actions that are related to one another, providing a cleaner and more organized interface. Use for grouped actions, toggle options, navigation, or filter/choice selection.

Preview

---
import { Group, Button } from 'webcoreui/astro'
---

<Group>
    <Button theme="secondary">Profile</Button>
    <Button theme="secondary">Preferences</Button>
    <Button theme="secondary">Settings</Button>
</Group>

<script>
    import { Group, Button } from 'webcoreui/svelte'
</script>

<Group>
    <Button theme="secondary">Profile</Button>
    <Button theme="secondary">Preferences</Button>
    <Button theme="secondary">Settings</Button>
</Group>

import React from 'react'
import { Group, Button } from 'webcoreui/react'

const Component = () => (
    <Group>
        <Button theme="secondary">Profile</Button>
        <Button theme="secondary">Preferences</Button>
        <Button theme="secondary">Settings</Button>
    </Group>
)

export default Component

The Group component can be used in combination with Button and Badge components. Simply pass the components inside the Group component to create a group.

Separated Group Elements

Group elements can be separated using a separator by setting the withSeparator prop on the Group component:

Buttons

Badges

HTML CSS JS

<Group withSeparator={true}>
    <Button theme="secondary">Profile</Button>
    <Button theme="secondary">Preferences</Button>
    <Button theme="secondary">Settings</Button>
</Group>

<Group withSeparator={true}>
    <Badge theme="alert">HTML</Badge>
    <Badge theme="info">CSS</Badge>
    <Badge theme="warning">JS</Badge>
</Group>

You can use any existing theme in the Group component to change the visual appearance of your elements.

API

type GroupProps = {
    withSeparator?: boolean
    className?: string
}

Prop	Purpose
`withSeparator`	Displays a border between elements. Defaults to `false`.
`className`	Pass additional CSS classes for the group.

<- Grid Icon ->

Request improvement for this page