Skip to content
Paramanu v0.1.0-alpha.0

Btn Group

Groups related buttons together with consistent spacing, optional attached borders, and horizontal or vertical layout.

Basic Usage

import { BtnGroup, Btn } from "@paramanu/buttons-react"


export default function App() {
return (
  <BtnGroup aria-label="Actions">
    <Btn variant="secondary">Left</Btn>
    <Btn variant="secondary">Center</Btn>
    <Btn variant="secondary">Right</Btn>
  </BtnGroup>
)
}
<div class="pm-btn-group pm-btn-group--horizontal" role="group" aria-label="Actions">
<button class="pm-btn pm-btn--secondary pm-btn--md">Left</button>
<button class="pm-btn pm-btn--secondary pm-btn--md">Center</button>
<button class="pm-btn pm-btn--secondary pm-btn--md">Right</button>
</div>

Attached

import { BtnGroup, Btn } from "@paramanu/buttons-react"


export default function App() {
return (
  <BtnGroup attached aria-label="Actions">
    <Btn variant="secondary">Left</Btn>
    <Btn variant="secondary">Center</Btn>
    <Btn variant="secondary">Right</Btn>
  </BtnGroup>
)
}
<div class="pm-btn-group pm-btn-group--horizontal pm-btn-group--attached" role="group" aria-label="Actions">
<button class="pm-btn pm-btn--secondary pm-btn--md">Left</button>
<button class="pm-btn pm-btn--secondary pm-btn--md">Center</button>
<button class="pm-btn pm-btn--secondary pm-btn--md">Right</button>
</div>

Vertical

import { BtnGroup, Btn } from "@paramanu/buttons-react"


export default function App() {
return (
  <BtnGroup orientation="vertical" aria-label="Actions">
    <Btn variant="secondary">Top</Btn>
    <Btn variant="secondary">Middle</Btn>
    <Btn variant="secondary">Bottom</Btn>
  </BtnGroup>
)
}
<div class="pm-btn-group pm-btn-group--vertical" role="group" aria-label="Actions">
<button class="pm-btn pm-btn--secondary pm-btn--md">Top</button>
<button class="pm-btn pm-btn--secondary pm-btn--md">Middle</button>
<button class="pm-btn pm-btn--secondary pm-btn--md">Bottom</button>
</div>