Search documentation v0.6.1

Group

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

Source ↗️ Report Issue ↗️

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
How to use Groups in Astro
---
import { Group, Button } from 'webcoreui/astro'
---
<Group>
<Button theme="secondary">Profile</Button>
<Button theme="secondary">Preferences</Button>
<Button theme="secondary">Settings</Button>
</Group>
How to use Groups in Svelte
<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>
How to use Groups in React
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
}
PropPurpose
withSeparator Displays a border between elements. Defaults to false.
className Pass additional CSS classes for the group.

Request improvement for this page