When you need to create a collection of similar action buttons, use a button group.
Angular Components
ClrButtonGroup
ClrButton group is a component made up of multiple ClrButton elements. Button elements can optionally be designated for an overflow menu.
Selector & Basic Usage
<clr-button-group></clr-button-group>
Bindings
Binding | Type | Options | Default | Description |
---|---|---|---|---|
[clrMenuPosition] | input | top-right, top-left, bottom-right, bottom-left, right-top, right-bottom, left-top, left-bottom | bottom-left | Set the position of the overflow menu when it is open. |
ClrButton
Angular button component used only with ClrButtonGroup.
Selector & Basic Usage
<clr-button></clr-button>
Bindings
Binding | Type | Options | Default | Description |
---|---|---|---|---|
[clrInMenu] | input | false | Designate a button for display in the overflow menu. | |
[class] | input | 'class1 class2 | none | A string of space delimited names that is used on the button element. |
[name] | input | btnName | none | Assign the button element a name |
[type] | input | e.g 'submit' | none | Set the type of button for screen readers. |
[id] | input | n/a | none | Set the id for the button element. |
[disabled] | input | n/a | false | Set the disabled attribute for the button element. |
(click) | output | n/a | none | Listen for the user generated click events.. |
CSS
Button group buttons have all of the same classes, states, types and sizes that stand alone Buttons do.