Dealogic Styleguide

section menu

Buttons

Buttons serve as calls to action and are used to invoke events.

  • Neutral Buttons act as a standard call to action.
  • Progressive Buttons represent an encouraged action.
  • Positive Buttons represent a positive action.
  • Negative Buttons represent a negative or cautioned action.
  • Disabled Buttons are in a state in which a button is presented to a user but it is not actionable.

Attributes

attribute: type: required? default: description:
name string no  

Name of the button element
type string no button

Button type ('button', 'reset' or 'submit')
icon string no  

Name of icon to placed inside button
state string no neutral

Button state, one of the following options: 'neutral' | 'progressive' | 'positive' | 'negative'
float boolean no false

Make button floating (can not be use combined with 'transparent')
transparent boolean no false

Make button transparent (can not be use combined with 'float')
disabled boolean no false

Disable button
busy boolean no false

Put button in 'busy' state
track boolean no false

Enable click-tracking on this button
selected boolean no false

Apply 'selected' state to this button

Methods

buttonFocus()

Focus on the button

Examples

Neutral Buttons

Neutral Buttons act as a standard call to action.

Neutral button Neutral button Neutral button Neutral disabled button Neutral float button Neutral float button Neutral transparent button Neutral transparent button Busy button Busy transparent button
<dl-button>Neutral button</dl-button>
<dl-button icon="action-check-circle-filled" style="width: 240px;">Neutral button</dl-button>
<dl-button icon="func-link">Neutral button</dl-button>
<dl-button icon="func-cloud-complete"></dl-button>
<dl-button icon="func-cloud-complete" disabled>Neutral disabled button</dl-button>
<dl-button float>Neutral float button</dl-button>
<dl-button float icon="arrow-arrow-up">Neutral float button</dl-button>
<dl-button transparent icon="arrow-arrow-up">Neutral transparent button</dl-button>
<dl-button transparent>Neutral transparent button</dl-button>
<dl-button transparent icon="arrow-arrow-up"></dl-button>
<dl-button busy>Busy button</dl-button>
<dl-button busy transparent>Busy transparent button</dl-button>

Progressive Buttons

Progressive Buttons act as means of highlighting a button that is associated with a encouraged action.

Progressive button Progressive button Progressive disabled button Progressive float button Progressive float button Progressive transparent button Progressive transparent button Busy button
<dl-button state="progressive">Progressive button</dl-button>
<dl-button state="progressive" icon="func-cloud-complete">Progressive button</dl-button>
<dl-button state="progressive" icon="func-cloud-complete"></dl-button>
<dl-button state="progressive" icon="func-cloud-complete" disabled>Progressive disabled button</dl-button>
<dl-button state="progressive" float>Progressive float button</dl-button>
<dl-button state="progressive" float icon="arrow-arrow-up">Progressive float button</dl-button>
<dl-button state="progressive" transparent icon="arrow-arrow-up">Progressive transparent button</dl-button>
<dl-button state="progressive" transparent>Progressive transparent button</dl-button>
<dl-button state="progressive" transparent icon="arrow-arrow-up"></dl-button>
<dl-button state="progressive" busy>Busy button</dl-button>

Positive Buttons

Positive Buttons act as means of highlighting a button that is associated with a positive action.

Positive button Positive button Positive disabled button Positive float button Positive float button Positive transparent button Positive transparent button Busy button
<dl-button state="positive">Positive button</dl-button>
<dl-button state="positive" icon="func-cloud-complete">Positive button</dl-button>
<dl-button state="positive" icon="func-cloud-complete"></dl-button>
<dl-button state="positive" icon="func-cloud-complete" disabled>Positive disabled button</dl-button>
<dl-button state="positive" float>Positive float button</dl-button>
<dl-button state="positive" float icon="arrow-arrow-up">Positive float button</dl-button>
<dl-button state="positive" transparent icon="arrow-arrow-up">Positive transparent button</dl-button>
<dl-button state="positive" transparent>Positive transparent button</dl-button>
<dl-button state="positive" transparent icon="arrow-arrow-up"></dl-button>
<dl-button state="positive" busy>Busy button</dl-button>

Negative Buttons

Negative Buttons act as means of highlighting a button that is associated with a negative or cautioned action.

Negative button Negative button Negative disabled button Negative float button Negative float button Negative transparent button Negative transparent button Busy button
<dl-button state="negative">Negative button</dl-button>
<dl-button state="negative" icon="func-cloud-complete">Negative button</dl-button>
<dl-button state="negative" icon="func-cloud-complete"></dl-button>
<dl-button state="negative" icon="func-cloud-complete" disabled>Negative disabled button</dl-button>
<dl-button state="negative" float>Negative float button</dl-button>
<dl-button state="negative" float icon="arrow-arrow-up">Negative float button</dl-button>
<dl-button state="negative" transparent icon="arrow-arrow-up">Negative transparent button</dl-button>
<dl-button state="negative" transparent>Negative transparent button</dl-button>
<dl-button state="negative" transparent icon="arrow-arrow-up"></dl-button>
<dl-button state="negative" busy>Busy button</dl-button>

Disabled Buttons

Disabled Buttons are a state in which a button is presented to a user but it is not actionable.

Disabled button Negative button Progressive button
<dl-button disabled>Disabled button</dl-button>
<dl-button state="negative" disabled>Negative button</dl-button>
<dl-button state="progressive" disabled icon="func-cloud-complete">Progressive button</dl-button>