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

Components

DaffButtonComponent

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

DaffButtonComponent is a rectangular contained button with background color.

@Component()
class DaffButtonComponent {
  @Input() status: DaffStatus
  @Input() color: DaffPalette
  @Input() elevated: boolean = false
  @Input() tabindex: number = 0
  @Input() disabled: any
}

Inputs

status

DaffStatus

Default –

Description

Sets the status on a component.

Options are: info, warn, critical, and success.

color

DaffPalette

Default –

Description

Sets the color on a component.

Default options are: primary, secondary, tertiary, light, dark, theme, and theme-contrast.

elevated

boolean

Default	`false`
Description	Whether or not the button displays a shadow.

tabindex

number

Default	`0`
Description	Sets the tabindex.

disabled

any

Default	–
Description	The disabled state of the button.

DaffFlatButtonComponent

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

DaffFlatButtonComponent is a rectangular contained button no background.

@Component()
class DaffFlatButtonComponent {
  @Input() status: DaffStatus
  @Input() color: DaffPalette
  @Input() tabindex: number = 0
  @Input() disabled: any
}

Inputs

status

DaffStatus

Default –

Description

Sets the status on a component.

Options are: info, warn, critical, and success.

color

DaffPalette

Default –

Description

Sets the color on a component.

Default options are: primary, secondary, tertiary, light, dark, theme, and theme-contrast.

tabindex

number

Default	`0`
Description	Sets the tabindex.

disabled

any

Default	–
Description	The disabled state of the button.

DaffRaisedButtonComponent

Deprecated

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

@Component()
class DaffRaisedButtonComponent {
  @Input() status: DaffStatus
  @Input() color: DaffPalette
  @Input() tabindex: number = 0
  @Input() disabled: any
}

Inputs

status

DaffStatus

Default –

Description

Sets the status on a component.

Options are: info, warn, critical, and success.

color

DaffPalette

Default –

Description

Sets the color on a component.

Default options are: primary, secondary, tertiary, light, dark, theme, and theme-contrast.

tabindex

number

Default	`0`
Description	Sets the tabindex.

disabled

any

Default	–
Description	The disabled state of the button.

DaffStrokedButtonComponent

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

DaffStrokedButtonComponent is a rectangular outlined button with no background color.

@Component()
class DaffStrokedButtonComponent {
  @Input() status: DaffStatus
  @Input() color: DaffPalette
  @Input() elevated: boolean = false
  @Input() tabindex: number = 0
  @Input() disabled: any
}

Inputs

status

DaffStatus

Default –

Description

Sets the status on a component.

Options are: info, warn, critical, and success.

color

DaffPalette

Default –

Description

Sets the color on a component.

Default options are: primary, secondary, tertiary, light, dark, theme, and theme-contrast.

elevated

boolean

Default	`false`
Description	Whether or not the button displays a shadow.

tabindex

number

Default	`0`
Description	Sets the tabindex.

disabled

any

Default	–
Description	The disabled state of the button.

DaffUnderlineButtonComponent

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

DaffUnderlineButtonComponent is a borderless button with a custom underline style.

@Component()
class DaffUnderlineButtonComponent {
  @Input() status: DaffStatus
  @Input() color: DaffPalette
  @Input() tabindex: number = 0
  @Input() disabled: any
}

Inputs

status

DaffStatus

Default –

Description

Sets the status on a component.

Options are: info, warn, critical, and success.

color

DaffPalette

Default –

Description

Sets the color on a component.

Default options are: primary, secondary, tertiary, light, dark, theme, and theme-contrast.

tabindex

number

Default	`0`
Description	Sets the tabindex.

disabled

any

Default	–
Description	The disabled state of the button.

DaffIconButtonComponent

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

DaffIconButtonComponent is an icon button used with icon fonts.

@Component()
class DaffIconButtonComponent {
  @Input() status: DaffStatus
  @Input() color: DaffPalette
  @Input() tabindex: number = 0
  @Input() disabled: any
}

Inputs

status

DaffStatus

Default –

Description

Sets the status on a component.

Options are: info, warn, critical, and success.

color

DaffPalette

Default –

Description

Sets the color on a component.

Default options are: primary, secondary, tertiary, light, dark, theme, and theme-contrast.

tabindex

number

Default	`0`
Description	Sets the tabindex.

disabled

any

Default	–
Description	The disabled state of the button.

Modules

DaffButtonModule

Deprecated

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

@NgModule()
class DaffButtonModule {}