Aedis UI

Button Group

Buttons that belong together: toolbars and segmented actions.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add button-group# pnpm dlx @aedis/cli@0.1.0 add button-group · yarn dlx @aedis/cli@0.1.0 add button-group · bunx @aedis/cli@0.1.0 add button-group

Props

PropTypeDefaultDescription
aria-label | aria-labelledbystring—Required: the group's name.
orientation"horizontal" | "vertical""horizontal"Direction; joined edges lose their inner radius.
ButtonGroupText / ButtonGroupSeparatorcomponents—A text cell (e.g. a URL prefix) and a divider.

Security

  • role="group" with a name; each button keeps its own semantics and tab stop.