Button
Directive for applying Kikita UI button styling to native button and anchor elements.
Import the public directive from the published package entrypoint.
import { KuiButtonDirective, kuiProvideButtonOptions } from '@kikita-labs/ui';Use native button semantics for commands and anchor semantics for navigation.
<div class="button-example">
<button kuiButton type="button">Save changes</button>
<button kuiButton type="button" shape="soft">Cancel</button>
<a kuiButton routerLink="/components/button">Button docs</a>
</div>shape controls the surface treatment (solid/soft/outline/ghost); appearance controls semantic color (primary/danger/success/warning). The two axes combine freely.
<div class="button-appearance-example">
<button kuiButton type="button">Solid</button>
<button kuiButton type="button" shape="soft">Soft</button>
<button kuiButton type="button" shape="outline">Outline</button>
<button kuiButton type="button" shape="ghost">Ghost</button>
<button kuiButton type="button" appearance="danger">Danger</button>
<button kuiButton type="button" shape="outline" appearance="danger">Outline danger</button>
</div>Use the shared Kikita size scale, native disabled state, and the loading state for pending actions.
<div class="button-size-example">
<button kuiButton type="button" size="xs">Extra small</button>
<button kuiButton type="button" size="sm">Small</button>
<button kuiButton type="button" size="md">Medium</button>
<button kuiButton type="button" size="lg">Large</button>
<button kuiButton type="button" disabled>Disabled</button>
<button kuiButton type="button" loading>Loading</button>
</div>Use iconStart/iconEnd for a registered icon name instead of hand-projecting kui-icon. Icon-only actions use kuiIconButton's icon input the same way.
<div class="button-icon-example">
<button kuiButton shape="soft" appearance="success" iconStart="check" type="button">Save</button>
<button kuiButton shape="outline" iconEnd="arrow-right" type="button">Continue</button>
<button
kuiIconButton
shape="soft"
appearance="danger"
icon="trash-2"
aria-label="Delete"
type="button"
></button>
</div>Use kuiProvideButtonOptions for repeated button-family defaults in a feature or application shell. Local inputs still win.
import { kuiProvideButtonOptions } from '@kikita-labs/ui';
export const featureProviders = [
kuiProvideButtonOptions({
button: { shape: 'ghost', appearance: 'primary', size: 'sm' },
iconButton: { shape: 'outline', size: 'sm' },
}),
];Inputs and provider defaults verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| shape | 'solid' | 'soft' | 'outline' | 'ghost' | 'solid' | Surface treatment. Defaults to solid. Combines freely with appearance. |
| appearance | 'primary' | 'danger' | 'success' | 'warning' | null | null | Semantic color intent. Without an explicit value, solid/soft use primary colors and outline/ghost use neutral defaults. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Control height and spacing size. |
| wrap | boolean | false | Allows long button text to wrap instead of truncating in narrow containers. |
| disabled | boolean | false | Disables native button behavior. Anchor buttons receive aria-disabled and leave tab order. |
| loading | boolean | false | Centers a kui-loader spinner over the button content, preserves layout size, sets aria-busy, and behaves like disabled. |
| iconStart | KuiIconName | undefined | undefined | Renders a kui-icon resolved by name before the projected content, without hand-projecting kui-icon. |
| iconEnd | KuiIconName | undefined | undefined | Renders a kui-icon resolved by name after the projected content, without hand-projecting kui-icon. |
| kuiProvideButtonOptions(options) | Provider | - | Scopes repeated defaults for kuiButton and kuiIconButton. Local inputs win over button options, and button options win over root defaults.size. |
| KUI_BUTTON_OPTIONS | InjectionToken<KuiButtonOptions> | - | Provider token behind button-family defaults, with separate button and iconButton branches. |
Button keeps native element behavior instead of replacing it with ARIA roles.