ArtificialSenseDocs

Docs / Components

SenseButtonGroupComponent

Groups related sense-button controls from @artificialsenselabs/ui with shared layout and an accessible role="group".

Live demo: run nx serve showcase and open /components/button-group (port 4202).

Overview

Category: Form controls. Selector: sense-button-group. Import: import { SenseButtonGroupComponent } from '@artificialsenselabs/ui';

<sense-button-group ariaLabel="Text alignment">
  <sense-button ariaLabel="Align left" />
  <sense-button ariaLabel="Align center" />
</sense-button-group>

Inputs

InputTypeDefaultDescription
ariaLabelstring | nullnullAccessible name for the grouped actions.
orientation'horizontal' | 'vertical''horizontal'Layout direction for connected buttons.
verticalbooleanfalseShorthand for vertical orientation.
size'sm' | 'md' | 'lg''md'Host size modifier for connected styling.

Accessibility

  • Inner wrapper exposes role="group".
  • Provide ariaLabel when individual button labels do not describe the collective action.
  • Dev mode warns when grouped content is projected without an ariaLabel.
ArtificialSense

AI-Native Enterprise Engineering Studio

© ArtificialSense · @artificialsenselabs/ui (MIT) & @artificialsenselabs/enterprise (Elastic License 2.0)

Privacy & telemetry

We use optional telemetry to catch production errors and measure real-user performance. Those scripts load only after you choose. Our host also runs cookieless aggregate page analytics — see the privacy policy.