advanced

Button Group

Groups multiple buttons together.

Preview

A preview of the Button Group component with interactive controls.

Preview Code
Interactive

Installation

Add the Button Group component to your project.

Bash
ng g @ng-cn/core:c button-group

Usage

Import and use the Button Group component in your Angular application.

Template TypeScript
template.html
<ButtonGroup>
  <Button variant="outline" size="icon">
    <lucide-icon name="align-left" class="h-4 w-4" />
  </Button>
  <Button variant="outline" size="icon">
    <lucide-icon name="align-center" class="h-4 w-4" />
  </Button>
  <Button variant="outline" size="icon">
    <lucide-icon name="align-right" class="h-4 w-4" />
  </Button>
</ButtonGroup>

Examples

Explore different variations and use cases for the Button Group component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' The orientation of the button group.