Buttons make actions apparent to users and can navigate to different pages or perform actions. They can display text, icons, or both.
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() @HostBinding() disabled: boolean = false
  @Input() elevated: boolean = false
  @Input() tabindex: number = 0
  @Input() disabled: any
}
DaffStatus| Default | – | 
|---|---|
| Description | Sets the status on a component. Options are:   | 
DaffPalette| Default | – | 
|---|---|
| Description | Sets the color on a component. Default options are:   | 
boolean| Default | false | 
|---|---|
| Description | 
boolean| Default | false | 
|---|---|
| Description | Whether or not the button displays a shadow.  | 
number| Default | 0 | 
|---|---|
| Description | Sets the tabindex.  | 
any| Default | – | 
|---|---|
| Description | The disabled state of the button.  | 
import { DaffFlatButtonComponent } from '@daffodil/design/button'
DaffFlatButtonComponent is a rectangular contained button no background.
@Component()
class DaffFlatButtonComponent {
  @Input() status: DaffStatus
  @Input() color: DaffPalette
  @Input() @HostBinding() disabled: boolean = false
  @Input() tabindex: number = 0
  @Input() disabled: any
}
DaffStatus| Default | – | 
|---|---|
| Description | Sets the status on a component. Options are:   | 
DaffPalette| Default | – | 
|---|---|
| Description | Sets the color on a component. Default options are:   | 
boolean| Default | false | 
|---|---|
| Description | 
number| Default | 0 | 
|---|---|
| Description | Sets the tabindex.  | 
any| Default | – | 
|---|---|
| Description | The disabled state of the button.  | 
import { DaffRaisedButtonComponent } from '@daffodil/design/button'
@Component()
class DaffRaisedButtonComponent {
  @Input() status: DaffStatus
  @Input() color: DaffPalette
  @Input() @HostBinding() disabled: boolean = false
  @Input() tabindex: number = 0
  @Input() disabled: any
}
DaffStatus| Default | – | 
|---|---|
| Description | Sets the status on a component. Options are:   | 
DaffPalette| Default | – | 
|---|---|
| Description | Sets the color on a component. Default options are:   | 
boolean| Default | false | 
|---|---|
| Description | 
number| Default | 0 | 
|---|---|
| Description | Sets the tabindex.  | 
any| Default | – | 
|---|---|
| Description | The disabled state of the button.  | 
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() @HostBinding() disabled: boolean = false
  @Input() elevated: boolean = false
  @Input() tabindex: number = 0
  @Input() disabled: any
}
DaffStatus| Default | – | 
|---|---|
| Description | Sets the status on a component. Options are:   | 
DaffPalette| Default | – | 
|---|---|
| Description | Sets the color on a component. Default options are:   | 
boolean| Default | false | 
|---|---|
| Description | 
boolean| Default | false | 
|---|---|
| Description | Whether or not the button displays a shadow.  | 
number| Default | 0 | 
|---|---|
| Description | Sets the tabindex.  | 
any| Default | – | 
|---|---|
| Description | The disabled state of the button.  | 
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() @HostBinding() disabled: boolean = false
  @Input() tabindex: number = 0
  @Input() disabled: any
}
DaffStatus| Default | – | 
|---|---|
| Description | Sets the status on a component. Options are:   | 
DaffPalette| Default | – | 
|---|---|
| Description | Sets the color on a component. Default options are:   | 
boolean| Default | false | 
|---|---|
| Description | 
number| Default | 0 | 
|---|---|
| Description | Sets the tabindex.  | 
any| Default | – | 
|---|---|
| Description | The disabled state of the button.  | 
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() @HostBinding() disabled: boolean = false
  @Input() tabindex: number = 0
  @Input() disabled: any
}
DaffStatus| Default | – | 
|---|---|
| Description | Sets the status on a component. Options are:   | 
DaffPalette| Default | – | 
|---|---|
| Description | Sets the color on a component. Default options are:   | 
boolean| Default | false | 
|---|---|
| Description | 
number| Default | 0 | 
|---|---|
| Description | Sets the tabindex.  | 
any| Default | – | 
|---|---|
| Description | The disabled state of the button.  | 
import { DaffButtonSizableDirective } from '@daffodil/design/button'
@Directive()
class DaffButtonSizableDirective extends DaffSizableDirective<DaffButtonSize> {}
import { DaffButtonModule } from '@daffodil/design/button'
@NgModule()
class DaffButtonModule {}
import { DaffButtonSize } from '@daffodil/design/button'
The size types that the DaffButtonComponent can implement.