Introduction Foundations Components Patterns Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Button

Clickable elements for anything you want people to click on

Buttons make common actions immediately visible and and easy to perform with one click or tap. They are used primarily for actions such as "Post a Project", "Bid", "Award", or "Accept". Less prominent actions, such as "View More", are executed using plain buttons, which visually resemble links.

Contents

Default Button group Button icons Button link Colors Example Hierarchy Responsive Sizes States

Responsive Size

Mobile first responsive button sizes using [sizeTablet] and [sizeDesktop] to override the default [size] property input.

Responsive Display

Mobile first responsive button display using [displayTablet] and [displayDesktop] to override the default [display] property input.

Inputs
disabled : boolean
submit : boolean
backIcon ?: boolean
busy ?: boolean
buttonGroupFirst ?: boolean = false
buttonGroupLast ?: boolean = false
buttonGroupMiddle ?: boolean = false
buttonGroupPosition ?: ButtonGroupPosition
buttonType ?: "submit" | "button" = 'button'
color ?: ButtonColor
display ?: ButtonDisplay = 'inline'
displayDesktop ?: ButtonDisplay
displayTablet ?: ButtonDisplay
fragment ?: string
label ?: string

Use only when necessary. This adds in aria-label for links / buttons that doesn't have a descriptive text. For example, a button that only has an icon inside it.

link ?: string

Url used for button link case

linkActive ?: string | string[]
linkActiveOptions ?: { exact: boolean; }
newTab ?: boolean

Whether to open the link in a new tab in desktop.

nextIcon ?: boolean
queryParams ?: { [k: string]: any; }
queryParamsHandling ?: QueryParamsHandling
rel ?: string = ''
size ?: ButtonSize
sizeDesktop ?: ButtonSize
sizeTablet ?: ButtonSize