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.
Button Links
Buttons can be links that specify an action that will be performed on another page of the website.
External Links
On desktop, external links (non-relative routes) will open in a new tab by default and must explicitly set [newTab]="false" to open in the same tab. On mobile devices, links will open to new tabs, but can be whitelisted to override behavior.
Internal Links
On desktop, internal links will open in the same tab by default, and must explicitly set [newTab]="true" to open in a new tab. On mobile devices, links will always open to same tab.
Whitelisted
To override default behavior, links or file extensions can be whitelisted.
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