Skip to main content Skip to navigation Skip to search

Button Group

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

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

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.