Installation
import { WrButtonGroup } from 'ngwr/button';
@Component({ imports: [WrButton, WrButtonGroup] })
export class MyComponent {}Basic usage
<wr-btn-group>
<button wr-btn>Left</button>
<button wr-btn>Middle</button>
<button wr-btn>Right</button>
</wr-btn-group>Colored
<wr-btn-group>
<button wr-btn color="primary">Save</button>
<button wr-btn color="primary">Save & Continue</button>
</wr-btn-group>Segmented control
Use color to highlight the active option.
<wr-btn-group>
<button wr-btn [color]="align() === 'left' ? 'primary' : null" (click)="align.set('left')">Left</button>
<button wr-btn [color]="align() === 'center' ? 'primary' : null" (click)="align.set('center')">Center</button>
<button wr-btn [color]="align() === 'right' ? 'primary' : null" (click)="align.set('right')">Right</button>
</wr-btn-group>Shape
shape on the group enforces a corner treatment across every child <wr-btn> — child [shape] inputs are ignored so the group reads as one coherent control.
<wr-btn-group shape="rounded">
<button wr-btn>One</button>
<button wr-btn>Two</button>
<button wr-btn>Three</button>
</wr-btn-group>
<wr-btn-group shape="pill">
<button wr-btn>One</button>
<button wr-btn>Two</button>
<button wr-btn>Three</button>
</wr-btn-group>
<!-- Group shape wins over child [shape] -->
<wr-btn-group shape="pill">
<button wr-btn>Forced</button>
<button wr-btn shape="rounded">Pill anyway</button>
</wr-btn-group>API
| Name | Description | Type | Default |
|---|---|---|---|
shape | Enforced corner treatment for every child <wr-btn>. Child [shape] is ignored when set on the group. null (default) leaves children alone. | 'rounded' | 'pill' | null | null |