Group
Import
import { VKGroup } from "@vivakits/react-components";Size
Defines the size of component children. Values range from extra small (xs) to double extra large (2xl), allowing fine-grained control over the visual size of children.
Border Radius
Determines the corner curvature of the component. Options range from no radius (sharp corners) to full radius (completely rounded), enabling various visual styles.
Orientation
Specifies the directional layout of child elements within the group. Horizontal alignment places elements in a row, while vertical alignment stacks them.
Separator Color
Sets the primary color scheme of the group's border. Multiple options are available to match different design requirements and themes.
Color
Sets the primary color scheme of the children. Multiple options are available to match different design requirements and themes.
Text 1
Text 2
Text 3
Text 1
Text 2
Text 3
Text 1
Text 2
Text 3
Text 1
Text 2
Text 3
Text 1
Text 2
Text 3
Text 1
Text 2
Text 3
Text 1
Text 2
Text 3
Text 1
Text 2
Text 3
Border
Controls the width of the component's outer border. Values range from none (no border) to 2xl (maximum thickness).
Border Color
Specifies the color of the component's border. Can be used to create visual hierarchy or match existing design patterns.
ShouldOverlapChildren
This prop determines whether the children of the Group component should overlap each other.When set to true, each child element will slightly overlap the previous one, creating a stacked effect.
MaxCount
Limits the number of visible items in the group. When the number of child elements exceeds the maxCount value, the remaining items are hidden.
Truncated Element
Show the remaining elements after exceeding the maxcount. It accepts boolean and JSX element. If the value is boolean it will just show the number of hidden elements and if the value is JSX it will show the provided JSX.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| size | defaultxssmmdlgxl2xl | Determines the size of the group. This is applied to all the children inside group | default |
| rounded | nonexssmmdlgxl2xlfull | For the border radius of the group | md |
| orientation | verticalhorizontal | Determines the orientation of the group | horizontal |
| separatorColor | primarysecondarysuccessdangerwarningdarklight | For the separator color of the group | light |
| color | noneprimarysecondarysuccessdangerwarningdarklight | For the background color of the group | primary |
| border | nonexssmmdlgxl2xl | For the size of the border of the group | xs |
| borderColor | defaultprimarysecondarysuccessdangerwarningdarklight | For the border color of the group | primary |
| className | string | For the custom css style of the group wrapper | - |
| maxCount | number | Limits the number of elements shown on the group. Used with the truncate element | - |
| truncatedElement | JSX.Element | when max count is available this element shows the amount of children that are hidden. | - |
| noSeparator | boolean | Determines if separator should be shown or not | false |
| shouldOverlapChildren | boolean | Overlaps children to the left side inside the group. Often used with avatar components | false |
| shouldWrap | boolean | Determines if "flex-wrap" style should be applied | true |
| childrenProps | any | For applying common props to all children under the group component |