Toolbar
Beta

Button

Native button component with an opinionated visual structure. The required label owns the accessible name, while optional built-in icons, custom content, and loading indicator slots support limited composition without replacing the button's primary semantics.

Import

import {FktButtonComponent} from "frakton-ng/button";

Usage

Native host usage. Apply fktButton directly to a <button> or <a> and provide its required label. Events, focus, native attributes, directives, element references, and form or navigation behavior stay on the actual interactive element.

Basic

The appearances use the same native markup and semantic label. type="button" is applied by default; consumers can use native attributes such as name, value, form, autofocus, and aria-describedby without forwarding through a wrapper component.

Anchor hosts

Anchor hosts keep native link behavior while sharing the same button appearance and accessibility contract. type and native disabled are never applied to anchors; disabled or loading anchors receive aria-disabled, leave the tab order, and block activation.

Sizes

Semantic sizes provide compact, default, and large control densities. Icon-only buttons use fixed square dimensions from the same size scale so toolbar and table actions remain aligned.

Composition

Limited composition keeps the required label under component ownership while exposing built-in icon inputs, custom visual content, and a loading-indicator slot. Visual content is decorative; the required label remains the accessible name.

Icons and content

Use icon, suffixIcon, and iconOnly for common icon buttons. Use [fktButtonContent] when the visual content is application-specific and should replace the visible label. Add fill to let the projected content own the full button surface.

Loading

Loading inserts an indicator at the configured side. At loadingPosition="start" it replaces icon when present; at loadingPosition="end" it replaces suffixIcon when present. It binds aria-busy="true" and makes the effective disabled state disabled || loading. Project [fktButtonLoadingIndicator] to replace the built-in spinner.

Appearance

Appearance combines visual treatment, shape, color, and size without changing button semantics. Semantic colors follow the design system, while custom CSS colors compute a contrasting content color.

Text variants

Appearances and semantic colors across the supported shapes.

@for (shape of shapes; track shape.value) {
    
            @for (appearance of shape.appearances; track appearance.value) {
                

                    @for (color of appearance.colors; track color.value) {
                        
                    }
                
            }
        

        
            

                
                    {{ shape.title }}
                
            

        
        

                    
                        {{ appearance.title }}
                    
                            
                        

    

}

Icon variants

Icon-only buttons use the same appearance, shape, and color contracts as labeled buttons. Their required label is exposed through aria-label.

@for (shape of shapes; track shape.value) {

        @for (appearance of shape.appearances; track appearance.value) {
        

            @for (color of appearance.colors; track color.value) {
            
            }
        
        }
    

    
        

            
                {{ shape.title }}
            
        

    
    

            
                {{ appearance.title }}
            
                
            



}

Custom colors

Any CSS color value is supported for application-specific actions. With labelColor="auto", the component derives black or white from the resolved color; pass labelColor when the application needs an explicit override.

Button

Configuration Options

Native Host

FktButtonComponent uses native interactive hosts: button[fktButton] for actions and a[fktButton] for navigation. Native attributes, events, focus, tooltips, analytics directives, and element references belong directly to the interactive element.

<button
  fktButton
  label="Save"
  name="intent"
  value="save"
  type="submit"
/>

The default button type is button to avoid accidental form submission. type is applied only to <button> hosts.

Use an anchor host when the interaction navigates:

<a
  fktButton
  href="https://github.com/Samukaii/frakton-ng"
  label="Open repository"
  icon="arrow-top-right-on-square"
  rel="noopener noreferrer"
  target="_blank"
/>

Angular router links use the same host:

<a
  fktButton
  routerLink="/getting-started/installation"
  label="Read installation guide"
  suffixIcon="chevron-right"
/>

Anchors do not support the native disabled attribute. When an anchor button is disabled or loading, the component binds aria-disabled="true", removes it from the tab order with tabindex="-1", and blocks activation. Native buttons receive the actual disabled attribute instead.

Most visual inputs accept default as their API default. default keeps the markup stable while allowing the styling layer to resolve the application's preferred appearance, shape, size, and color.

Styling Hooks

The component exposes stable styling hooks instead of variant-specific design tokens. Consumers configure the button through public inputs; the host reflects the resolved visual axes as generated data-fkt-* attributes for CSS queries and selectors.

<button
  fktButton
  label="Delete"
  color="danger"
  appearance="stroked"
  shape="sharp"
  size="sm"
/>

The reflected attributes are output-only styling hooks generated by FktButtonComponent; do not set them manually in application markup. Use them only as selectors when a variation needs different values for the same public design tokens:

button[fktButton][data-fkt-color='danger'] {
  --fkt-button-color: var(--app-danger);
  --fkt-button-text-color: white;
}

[fktButton][data-fkt-size='sm'] {
  --fkt-button-padding: 0.25rem 0.75rem;
  --fkt-button-font-size: 0.75rem;
}

Arbitrary CSS colors are exposed as data-fkt-color="custom" and the raw color is applied through an internal bridge variable. Semantic colors continue to default to the global --fkt-color-* tokens.

Anchor hosts remove browser underline by default through --fkt-button-text-decoration. Set the token when a link-styled button should keep or restore text decoration:

a[fktButton] {
  --fkt-button-text-decoration: underline;
}

Icons and Custom Content

The component covers common icon usage with built-in icon inputs:

<button fktButton label="Save" icon="check"/>

<button fktButton label="Open details" suffixIcon="arrow-top-right-on-square"/>

<button fktButton label="Delete" icon="trash" iconOnly/>

iconOnly renders only the built-in icon visually and exposes the required label through the native aria-label.

For application-specific visual content, project a single main content block with fktButtonContent. The projected content replaces the visible label, while label remains the accessible name.

<button fktButton label="Open Samuel profile">
  <app-user-chip fktButtonContent/>
</button>

Use fill when the custom content should own the entire visual surface of the button. This removes the button padding and lets the projected content define its own spacing.

<button fktButton label="Open Samuel profile">
  <app-user-card fktButtonContent fill/>
</button>

Label and Accessibility

label is required and is the only semantic label source. By default it is rendered visibly. When iconOnly or fktButtonContent is used, the visual label is not rendered and the same value is bound to the native aria-label. Built-in icons, custom content, and loading-indicator content are decorative and hidden from the accessibility tree.

Loading

Loading preserves the normal content while inserting an indicator on the configured side. With loadingPosition="start" the indicator replaces icon when present; otherwise it is inserted before the main content. With loadingPosition="end" it replaces suffixIcon when present; otherwise it is inserted after the main content. It also binds aria-busy="true" and prevents activation. Native buttons receive disabled; anchors receive aria-disabled="true" and tabindex="-1". A projected fktButtonLoadingIndicator replaces the default spinner.

<button fktButton label="Save" icon="check" loading/>

Configuration-driven Actions

FktButtonAction describes actions rendered from configuration, including FktButtonsList, dialog actions, table actions, and empty states.

import { FktButtonAction } from 'frakton-ng/button';

const saveAction: FktButtonAction<FormModel> = {
  identifier: 'save',
  label: 'Save',
  icon: 'check',
  iconPosition: 'left',
  color: 'primary',
  click: (form) => save(form),
};

icon and iconPosition are conveniences for configuration renderers. Direct button usage uses icon, suffixIcon, iconOnly, and fktButtonContent instead.