Button Group
import { KbqButtonModule } from '@koobiq/components/button';

Marks content to be projected into the prefix (leading) slot of a button.

Selector: [kbqButtonPrefix]

This directive enhances `kbq-button` elements acting as dropdown triggers, visually indicating the active state with the `kbq-active` class, following Koobiq Design System. The directive relies on a separate `KbqDropdownTrigger` directive to get dropdown's state.

Selector: [kbq-button][kbqDropdownTriggerFor]

Properties
Name Description
dropdownTrigger: KbqDropdownTrigger

Marks content to be projected into the suffix (trailing) slot of a button.

Selector: [kbqButtonSuffix]

Root directive that groups related buttons, propagating a shared style, color, and disabled state to every nested button

Selector: [kbqButtonGroupRoot]

Properties
Name Description
@Input()
color: string
Color applied to the group and propagated to every nested button. individual button's color preserved but updated when group input changed.
@Input()
disabled: boolean
Whether the root is disabled.
@Input()
kbqStyle: string
Style applied to the group and propagated to every nested button. individual button's style preserved but updated when group input changed.
colorClassName: string current class name of color
Methods
setDefaultColor
this color will be used as a default value. For example [color]="'' | false | undefined | null".

Applies the `kbq-button`/`kbq-button-icon` host class and the left/right icon modifier classes. A button is treated as an icon button when its projected content consists only of `KbqIcon`s and there are at most 2 of them. When icons are mixed with other content, only the outermost icons receive the left/right classes. Must be used together with `KbqButton` (both match `[kbq-button]`): icon detection relies on the `.kbq-button-wrapper` element rendered by the component's template.

Selector: [kbq-button]

Properties
Name Description
icons: Signal
isIconButton: boolean Whether the button contains only icons (at most 2).
nativeElement: HTMLElement
Methods
updateClassModifierForIcons

Groups and styling related `KbqButton`s into a single visual unit.

Selector: kbq-button-group, [kbq-button-group]

Properties
Name Description
@Input()
orientation: InputSignal
Layout direction: `'horizontal'` or `'vertical'`

Selector: [kbq-button]

Properties
Name Description
@Input()
disabled: boolean
Whether the button is disabled.
@Input()
kbqStyle: string
color: string
colorClassName: string current class name of color
haltDisabledEvents: (event: Event) => void
hasFocus: boolean
parentTextElement: ElementRef The flex row that lays out the icons and text, used as the overflow width constraint.
styler: KbqButtonCssStyler
textElement: ElementRef
Methods
focus
focusViaKeyboard
getHostElement
onBlur
onFocus
projectContentChanged
setDefaultColor
this color will be used as a default value. For example [color]="'' | false | undefined | null".
const buttonLeftIconClassName: string;
const buttonRightIconClassName: string;
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.