Toolbar
Beta

Buttons list

The FktButtonsList component provides a flexible container for displaying multiple buttons with consistent spacing and alignment. Built with Angular signals and customizable layout options, it supports both horizontal and vertical orientations with various alignment strategies.

Import

import {FktButtonsListComponent} from "frakton-ng/buttons-list";

Preview

A horizontal list of action buttons with different themes and colors, perfect for form actions.

Form actions

Form action buttons with cancel, save, and submit actions using different alignment options.

Vertical list

Buttons arranged vertically with filled button style and center alignment.

Icon only actions

Compact icon-only buttons with tooltips for space-efficient toolbars.

Data table actions

Action buttons commonly used in data tables for row-level operations.

Bulk actions

Demonstrates a group of bulk actions, such as selecting all items, exporting, or deleting selected entries. Each action can have a custom theme, color, icon, and label. Useful for batch operations in tables, lists, or admin panels.

Toolbar actions

Shows a classic horizontal toolbar with multiple actions, including "New", "Import", "Export", and "Refresh". Icons, themes, and tooltips are supported for enhanced usability in top toolbars and navigation bars.

Floating actions

Displays floating action buttons (FAB) in a vertical stack. Ideal for mobile or compact layouts where quick access to chat or add actions is needed. Each button can show an icon and tooltip for accessibility.

Loading states

Showcases actions in a loading state. Useful for asynchronous operations where feedback is required, such as saving data. The button can display a spinner and custom loading text until the process completes.

Disabled states

Illustrates disabled actions, preventing user interaction. Use for workflows where certain steps are unavailable or conditional, such as submitting forms only after all required fields are completed.