Button Group

Svelte

<BtnGroup greyed outlined round gap>
  <Btn />
  <Btn />
</BtnGroup>

HTML

<div class="btn-group [alpha] greyed outlined round gap">
  <button class="btn {...}">btn 1</button>
  <button class="btn {...}">btn 2</button>
</div>

CSS

.btn-group {
  --round-border-radius: calc(var(--btn-h) / 2);
  --border-radius: var(--btn-br);
}

Variations

BtnGroup normal

.btn-group > .btn.base

.btn-group.greyed > .btn

.btn-group.greyed.round > .btn.slim.alpha

.btn-group.greyed > .btn.[accent]

.btn-group.greyed > .btn.colored.slim.[accent]

Text & Icon

.btn-group.greyed > .btn.round.beta

.btn-group > .btn.outlined.[accent]

.btn-group.round > .btn.outlined.[accent]

BtnGroup with filled buttons

.btn-group > .btn.filled.base

.btn-group.with-filled.alpha > .btn.filled.alpha.slim

.btn-group.with-filled.alpha.gap > .btn.filled.alpha

.btn-group.with-filled.beta > .btn.filled.[accent]

.btn-group.with-filled.danger > .btn.filled.equal.[accent]

Text & Icon

Text & Icon & round

BtnGroup outlined

.btn-group.outlined > .btn.base

.btn-group.outlined.greyed > .btn.base

.btn-group.outlined > .btn.colored.[accent]

.btn-group.outlined.danger > .btn

.btn-group.outlined.gamma > .btn.icon-only.gamma.colored

.btn-group.outlined > .btn.icon-only.[accent]

Text & Icon

Text & Icon & round