import { Component } from '@angular/core';
import { WrButton, WrButtonGroup } from 'ngwr/button';
@Component({ imports: [WrButton, WrButtonGroup] })
export class MyComponent {}Button Group
Joins buttons into one control with shared borders.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
<wr-btn-group>
<button wr-btn type="button">Left</button>
<button wr-btn type="button">Middle</button>
<button wr-btn type="button">Right</button>
</wr-btn-group>Colored
<wr-btn-group>
<button wr-btn type="button" color="primary">Save</button>
<button wr-btn type="button" color="primary">Save & Continue</button>
</wr-btn-group>Shape
shape on the group sets every button's corners; a button's own shape is ignored.
<wr-btn-group shape="rounded">
<button wr-btn type="button">One</button>
<button wr-btn type="button">Two</button>
<button wr-btn type="button">Three</button>
</wr-btn-group>
<wr-btn-group shape="pill">
<button wr-btn type="button">One</button>
<button wr-btn type="button">Two</button>
<button wr-btn type="button">Three</button>
</wr-btn-group>
<!-- Group shape wins over child [shape] -->
<wr-btn-group shape="pill">
<button wr-btn type="button">Forced</button>
<button wr-btn type="button" shape="rounded">Pill anyway</button>
</wr-btn-group>API
| Name | Description | Type | Default |
|---|---|---|---|
shape | Corners of every child button. A child's own shape is ignored; null gives every child rounded. | WrButtonShape | null | null |