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]
| 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]
| 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 |
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]
| Name | Description |
|---|---|
| icons: Signal |
|
| isIconButton: boolean | Whether the button contains only icons (at most 2). |
| nativeElement: HTMLElement |
Groups and styling related `KbqButton`s into a single visual unit.
Selector: kbq-button-group, [kbq-button-group]
| Name | Description |
|---|---|
@Input() orientation: InputSignal |
Layout direction: `'horizontal'` or `'vertical'` |
Selector: [kbq-button]
| 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 |
const buttonLeftIconClassName: string;
const buttonRightIconClassName: string;