Skip to content

panelui-web v0.9.1

Choose a tag to compare

@Khalidabdi1 Khalidabdi1 released this 26 Oct 15:06
· 17 commits to main since this release

Button Group now looks like the segmented Tabs.

Changed

  • Button Group is drawn as a track. In 0.9.0 each button in a group drew its own border and shadow, so the outline almost disappeared in dark mode and the shadows showed at every join. A group is now drawn the way the segmented Tabs are: a muted track, with the buttons inside it at the radius one step smaller, so their corners follow the track's. Outline and ghost buttons lie flat with muted labels, and the one under the pointer rises out of the track like the chosen tab, with the short dividers beside it fading. A field or a filled button keeps its own surface.
  • Split buttons stay joined. A group with a ButtonGroup.Separator in it has no track: its filled halves meet edge to edge, and the separator carries their fill across the seam with a short line in their text colour. A group of groups still spaces them apart, one track each.

The API is unchanged, so nothing in your code needs to move.

Docs

  • The Button Group page describes the track, and is marked updated.
  • panelui.dev has a new home page hero. Expo and Web tabs switch the install command and where Get Started and Browse Components lead, the headline ends on a word that dissolves between "app" and "website", and a dithered glow lights it from three sides.

Using it

npm install panelui-web@latest
import { Button } from 'panelui-web/button';
import { ButtonGroup } from 'panelui-web/button-group';

<ButtonGroup aria-label="Message actions">
  <Button variant="outline">Archive</Button>
  <Button variant="outline">Snooze</Button>
  <Button variant="outline">Report</Button>
</ButtonGroup>