Skip to content
Paramanu v0.1.0-alpha.0

Group

Group arranges related elements together, supporting attached borders (for button groups), grow, and wrap.

Basic Usage

import { Group } from "@paramanu/primitives-react"


export default function App() {
return (
  <Group gap="3">
    <button>Action 1</button>
    <button>Action 2</button>
    <button>Action 3</button>
  </Group>
)
}
<div class="pm-group pm-group--horizontal pm-group--gap-3" role="group">
<button type="button">Action 1</button>
<button type="button">Action 2</button>
<button type="button">Action 3</button>
</div>

Attached

import { Group } from "@paramanu/primitives-react"


export default function App() {
return (
  <Group attached>
    <button>Left</button>
    <button>Center</button>
    <button>Right</button>
  </Group>
)
}
<div class="pm-group pm-group--horizontal pm-group--attached" role="group">
<button type="button">Left</button>
<button type="button">Center</button>
<button type="button">Right</button>
</div>