Button

The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.

Usage

API

DaffButtonModule

import { DaffButtonModule } from '@daffodil/design/button'

@NgModule()
class DaffButtonModule {}

DAFF_BUTTON_COMPONENTS

DAFF_BUTTON_COMPONENTS imports all the available button types.

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

import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button'

const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent]

DaffButtonComponent

DaffButtonComponent is a rectangular contained button with background color.

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

import { DaffButtonComponent } from '@daffodil/design/button'

@Component()
class DaffButtonComponent extends DaffButtonBaseDirective {}

Selector: 'button[daff-button]' + ',' + 'a[daff-button]'

DaffFlatButtonComponent

DaffFlatButtonComponent is a rectangular contained button no background.

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

import { DaffFlatButtonComponent } from '@daffodil/design/button'

@Component()
class DaffFlatButtonComponent extends DaffButtonBaseDirective {}

Selector: 'button[daff-flat-button]' + ',' + 'a[daff-flat-button]'

DaffRaisedButtonComponent

DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.

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

import { DaffRaisedButtonComponent } from '@daffodil/design/button'

@Component()
class DaffRaisedButtonComponent extends DaffButtonBaseDirective {}

Selector: 'button[daff-raised-button]' + ',' + 'a[daff-raised-button]'

DaffStrokedButtonComponent

DaffStrokedButtonComponent is a rectangular outlined button with no background color.

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

import { DaffStrokedButtonComponent } from '@daffodil/design/button'

@Component()
class DaffStrokedButtonComponent extends DaffButtonBaseDirective {}

Selector: 'button[daff-stroked-button]' + ',' + 'a[daff-stroked-button]'

DaffUnderlineButtonComponent

DaffUnderlineButtonComponent is a borderless button with a custom underline style.

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

import { DaffUnderlineButtonComponent } from '@daffodil/design/button'

@Component()
class DaffUnderlineButtonComponent extends DaffButtonBaseDirective {}

Selector: 'button[daff-underline-button]' + ',' + 'a[daff-underline-button]'

DaffIconButtonComponent

DaffIconButtonComponent is an icon button used with icon fonts.

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

import { DaffIconButtonComponent } from '@daffodil/design/button'

@Component()
class DaffIconButtonComponent extends DaffButtonBaseDirective {}

Selector: 'button[daff-icon-button]' + ',' + 'a[daff-icon-button]'