Skip to main content
The Button component is a versatile UI element that supports multiple visual variants, icon placement, and accessibility features.

​
Usage

Add the flxButton directive to a <button> or <a> element to apply button styling. 
<button flxButton>Click me</button>

​
Selector

button[flxButton], a[flxButton]

​
Properties

​
appearance
'fill' | 'ghost' | 'text'
default:"'fill'"
Visual style variant of the button.
  • fill: Solid background with border
  • ghost: Transparent background with border
  • text: No background or border
​
state
'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'
default:"'default'"
Semantic state that controls the button’s color scheme.
​
size
'small' | 'medium' | 'large'
default:"'medium'"
Size of the button, affecting padding and font size.
​
icon
string
Name of the icon to display within the button. Uses the FlowX icon library.
​
iconPosition
'left' | 'right'
default:"'left'"
Position of the icon relative to the button text.
​
disabled
boolean
default:"false"
When true, disables the button and applies disabled styling.
​
type
'button' | 'submit' | 'reset'
default:"'button'"
HTML button type attribute. Only applicable to <button> elements.

​
Variants

​
Fill variants

Solid buttons with filled backgrounds, ideal for primary actions. 
<button flxButton appearance="fill" state="default">Default</button>
<button flxButton appearance="fill" state="brand">Brand</button>
<button flxButton appearance="fill" state="success">Success</button>
<button flxButton appearance="fill" state="warning">Warning</button>
<button flxButton appearance="fill" state="danger">Danger</button>
<button flxButton appearance="fill" state="info">Info</button>

​
Ghost variants

Buttons with transparent backgrounds and borders, suitable for secondary actions. 
<button flxButton appearance="ghost" state="default">Default</button>
<button flxButton appearance="ghost" state="brand">Brand</button>
<button flxButton appearance="ghost" state="success">Success</button>
<button flxButton appearance="ghost" state="warning">Warning</button>
<button flxButton appearance="ghost" state="danger">Danger</button>
<button flxButton appearance="ghost" state="info">Info</button>

​
Text variants

Minimal buttons without backgrounds or borders, best for tertiary actions. 
<button flxButton appearance="text" state="default">Default</button>
<button flxButton appearance="text" state="brand">Brand</button>
<button flxButton appearance="text" state="success">Success</button>
<button flxButton appearance="text" state="danger">Danger</button>

​
Sizes

<button flxButton size="small">Small Button</button>
<button flxButton size="medium">Medium Button</button>
<button flxButton size="large">Large Button</button>

​
Component integration

​
With form controls

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <input type="text" formControlName="name" placeholder="Name" />
      <input type="email" formControlName="email" placeholder="Email" />
      
      <div class="button-group">
        <button flxButton type="submit" 
                state="brand" 
                [disabled]="!userForm.valid">
          Submit
        </button>
        <button flxButton type="button" 
                appearance="ghost" 
                (click)="onCancel()">
          Cancel
        </button>
      </div>
    </form>
  `
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }

  onCancel() {
    this.userForm.reset();
  }
}

​
Icon-only buttons

<!-- Use aria-label for accessibility -->
<button flxButton 
        icon="edit" 
        aria-label="Edit item">
</button>

<button flxButton 
        icon="delete" 
        state="danger"
        aria-label="Delete item">
</button>

<button flxButton 
        icon="settings" 
        appearance="ghost"
        aria-label="Open settings">
</button>

​
Theming

The Button component uses CSS custom properties for theming. You can customize the appearance by overriding these variables: 
:root {
  --flxTheme-button-borderWidth: 1px;
  --flxTheme-button-borderRadius: 4px;
  --flxTheme-button-fontFamily: inherit;
  --flxTheme-button-fontSize: 14px;
  --flxTheme-button-fontWeight: 500;
  --flxTheme-button-lineHeight: 1.5;
  --flxTheme-button-paddingTop: 8px;
  --flxTheme-button-paddingRight: 16px;
  --flxTheme-button-paddingBottom: 8px;
  --flxTheme-button-paddingLeft: 16px;
  --flxTheme-button-shadow: none;
  
  /* State-specific colors */
  --flxTheme-button-backgroundColor: #ffffff;
  --flxTheme-button-borderColor: #d0d0d0;
  --flxTheme-button-color: #333333;
  --flxTheme-button-iconColor: invert(0%);
}
The button automatically handles hover, focus, and active states with smooth transitions.

​
Accessibility

  • Always provide meaningful text content or an aria-label for icon-only buttons
  • Use the disabled attribute to prevent interaction with unavailable actions
  • The component maintains keyboard focus styles for accessibility
  • Link buttons (<a flxButton>) should have valid href attributes
Avoid using <div> or <span> elements with the flxButton directive, as they lack native button semantics and keyboard accessibility.

​
Best practices

Use fill buttons for primary actions, ghost for secondary actions, and text for tertiary or inline actions to establish a clear visual hierarchy.
  • Limit the number of high-emphasis (fill) buttons per screen
  • Keep button text concise and action-oriented
  • Group related buttons together with consistent spacing
  • Use state colors consistently across your application

Build docs developers (and LLMs) love

Get started for freeTalk to us