Button

Buttons make actions apparent to users and can navigate to different pages or perform actions. They can display text, icons, or both.

Usage

API

Overview

Button supports four variants that change its visual style, each applied as an attribute:

Attribute	Description
`daff-button`	Rectangular button with background color
`daff-flat-button`	Rectangular button with no outline or background color
`daff-icon-button`	Icon only button used with icon fonts
`daff-stroked-button`	Rectangular button with oultline, no background color

Native <button> or <a> elements should always be used in order to provide an easy, accessible experience for users.

Use <a> for navigation to new pages or different sections.
Use <button> for actions performed within the same page.

Basic button

Link

<button daff-button>Default</button>
<button daff-button elevated="true" color="primary">Primary</button>
<button daff-button color="secondary">Secondary</button>
<button daff-button color="tertiary">Tertiary</button>
<button daff-button color="dark">Dark</button>
<button daff-button color="light">Light</button>
<button daff-button color="theme">Theme</button>
<button daff-button color="theme-contrast">Theme Contrast</button>
<a href="#" daff-button>Link</a>

Flat button

Link

<button daff-flat-button>Default</button>
<button daff-flat-button elevated="true" color="primary">Primary</button>
<button daff-flat-button color="secondary">Secondary</button>
<button daff-flat-button color="tertiary">Tertiary</button>
<button daff-flat-button color="dark">Dark</button>
<button daff-flat-button color="light">Light</button>
<button daff-flat-button color="theme">Theme</button>
<button daff-flat-button color="theme-contrast">Theme Contrast</button>
<a href="#" daff-flat-button>Link</a>

Stroked button

Link

<button daff-stroked-button>Default</button>
<button daff-stroked-button color="primary">Primary</button>
<button daff-stroked-button color="secondary">Secondary</button>
<button daff-stroked-button color="tertiary">Tertiary</button>
<button daff-stroked-button color="dark">Dark</button>
<button daff-stroked-button color="light">Light</button>
<button daff-stroked-button color="theme">Theme</button>
<button daff-stroked-button color="theme-contrast">Theme Contrast</button>
<a href="#" daff-stroked-button>Link</a>

dark, light, and theme should be used with caution to ensure that there is sufficient contrast.

Icon button

<button daff-icon-button><fa-icon [icon]="faPlus"></fa-icon></button>
<button daff-icon-button color="primary"><fa-icon [icon]="faPlus"></fa-icon></button>
<button daff-icon-button color="secondary"><fa-icon [icon]="faPlus"></fa-icon></button>
<button daff-icon-button color="tertiary"><fa-icon [icon]="faPlus"></fa-icon></button>
<button daff-icon-button color="dark"><fa-icon [icon]="faPlus"></fa-icon></button>
<button daff-icon-button color="light"><fa-icon [icon]="faPlus"></fa-icon></button>
<button daff-icon-button color="theme"><fa-icon [icon]="faPlus"></fa-icon></button>
<button daff-icon-button color="theme-contrast"><fa-icon [icon]="faPlus"></fa-icon></button>

dark, light, and theme should be used with caution to ensure that there is sufficient contrast.

Usage

Within a standalone component

To use button in a standalone component, import each button type directly into your custom component.

Available imports:

DAFF_BASIC_BUTTON_COMPONENTS
DAFF_FLAT_BUTTON_COMPONENTS
DAFF_ICON_BUTTON_COMPONENTS
DAFF_STROKED_BUTTON_COMPONENTS
DAFF_BUTTON_COMPONENTS (all types)

import { DAFF_BASIC_BUTTON_COMPONENTS } from '@daffodil/design/button';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_BASIC_BUTTON_COMPONENTS,
  ],
})
export class CustomComponent {}

Within a module (deprecated)

To use button in a module, import DaffButtonModule into your custom module:

import { NgModule } from '@angular/core';
import { DaffButtonModule } from '@daffodil/design/button';
import { CustomComponent } from './custom.component';

@NgModule({
    declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffButtonModule,
  ],
})
export class CustomComponentModule { }

This method is deprecated. It's recommended to update all custom components to standalone.

Anatomy

Buttons should always have a label, unless you are only using an icon that is universally understood and accessible.

Icon support

An icon can be rendered on either side of the button text content with the daffPrefix and daffSuffix selectors. Avoid using both simultaneously.

<button daff-button>
  <fa-icon [icon]="faUser" daffPrefix></fa-icon>
  Button label
</button>

<button daff-button>
  Button label
  <fa-icon [icon]="faArrowRight" daffSuffix></fa-icon>
</button>

Features

Sizes

Use the size property to control button dimensions. The default size is md.

Small Buttons

Medium Buttons (Default)

Large Buttons

<h4>Small Buttons</h4>

<div class="button-sizes-example__group">
	<button daff-button size="sm">Small Button</button>
	<button daff-stroked-button size="sm">Small Stroked Button</button>
	<button daff-flat-button size="sm">Small Flat Button</button>
	<button daff-icon-button size="sm"><fa-icon [icon]="faPlus"></fa-icon></button>
</div>

<h4>Medium Buttons (Default)</h4>

<div class="button-sizes-example__group">
	<button daff-button size="md">Medium Button</button>
	<button daff-stroked-button size="md">Medium Stroked Button</button>
	<button daff-flat-button size="md">Medium Flat Button</button>
	<button daff-icon-button size="md"><fa-icon [icon]="faPlus"></fa-icon></button>
</div>

<h4>Large Buttons</h4>

<div class="button-sizes-example__group">
	<button daff-button size="lg">Large Button</button>
	<button daff-stroked-button size="lg">Large Stroked Button</button>
	<button daff-flat-button size="lg">Large Flat Button</button>
	<button daff-icon-button size="lg"><fa-icon [icon]="faPlus"></fa-icon></button>
</div>

Colors

Use the color property to change the color of a button.

Note: dark, light, and theme should be used on appropriate backgrounds for sufficient contrast.

Elevation

Add shadows to buttons with the elevated property.

Note: The elevated property is not supported for flat, icon, and underline buttons.

<button daff-button elevated="true">Basic</button>
<button daff-stroked-button elevated="true">Stroked</button>

Loading

Use the loading property to indicate that an action is being processed. When loading is set to true, the button displays a spinner.

<button daff-button [loading]="true">Button</button>
<button daff-flat-button [loading]="true">Button</button>
<button daff-stroked-button [loading]="true">Button</button>
<button daff-icon-button [loading]="true"></button>

Status indicators

Status indicators help users understand the type of action a button performs and its importance relative to other buttons in the same context. Use the status property to convey different semantic meanings.

Basic Status Buttons

Flat Status Buttons

Stroked Status Buttons

Icon Status Buttons

<h4>Basic Status Buttons</h4>
<div class="statusable-button-example__group">
	<button daff-button status="warn">Warn</button>
	<button daff-button status="critical">Critical</button>
	<button daff-button status="success">Success</button>
</div>

<h4>Flat Status Buttons</h4>
<div class="statusable-button-example__group">
	<button daff-flat-button status="warn">Warn</button>
	<button daff-flat-button status="critical">Critical</button>
	<button daff-flat-button status="success">Success</button>
</div>

<h4>Stroked Status Buttons</h4>
<div class="statusable-button-example__group">
	<button daff-stroked-button status="warn">Warn</button>
	<button daff-stroked-button status="critical">Critical</button>
	<button daff-stroked-button status="success">Success</button>
</div>

<h4>Icon Status Buttons</h4>
<div class="statusable-button-example__group">
	<button daff-icon-button status="warn"><fa-icon [icon]="faExclamation"></fa-icon></button>
	<button daff-icon-button status="critical"><fa-icon [icon]="faExclamationTriangle"></fa-icon></button>
	<button daff-icon-button status="success"><fa-icon [icon]="faCheckCircle"></fa-icon></button>
</div>

Accessbility

Daffodil uses native <a> and <button> HTML elements to ensure an accessible experience by default.

Use <a> for navigation to new pages or different sections.
Use <button> for actions performed within the same page.
Icon only buttons (<daff-icon-button>) need to be given meaningful labels using aria-label or aria-labelledby.

Deprecations

<daff-raised-button> is deprecated and will be removed in v1.0.0. Use the elevated property instead.
<daff-underline-button> is deprecated and will be removed in v1.0.0.