Button
The FktButton component provides a versatile and customizable button with multiple themes, variants, and styling options. Built with Angular signals and modern design patterns, it supports various visual styles, icons, loading states, and accessibility features.
Import
import {FktButtonComponent} from "frakton-ng/button";Raised
A standard button with elevated appearance, perfect for primary actions.
Stroked
An outlined button style ideal for secondary actions and cancel operations.
Disabled
Button in disabled state showing non-interactive appearance and behavior.
With icon
Button with icon support, demonstrating icon positioning and combination with text.
Basic
Minimal button style with basic theme, perfect for subtle actions and text-only interactions.
Icon only
Compact circular button with just an icon, ideal for toolbars and action menus.
Rect icon
Rectangular icon button with standard padding, perfect for data table actions.
Loading
Button showing loading state with custom loading text, perfect for async operations.
With left icon
Button with icon positioned to the left of the text for enhanced visual hierarchy.
Text variants
Comprehensive showcase of all button text variants across different themes, colors, and shapes.
Rounded
Rect
Rounded
Raised
Stroked
Basic
Rect
Raised
Stroked
Basic
Icon variants
Comprehensive showcase of all button icon variants across different themes, colors, and shapes.
Rounded
Rect
Rounded
Raised
Stroked
Basic
Rect
Raised
Stroked
Basic
Stroked secondary
Buttons demonstrating different theme options with the same color for consistency.
Long text
Button with longer text content showing how the component handles text wrapping.