The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.
Native <button> or <a> elements are always used in order to provide an easy, accessible experience for users.
<a>should be used for interactions that will navigate users to a new page or to a different target on the same page.<button>should be used when a clickable action is performed within the same page.
daff-button-- Rectangular contained button with background colordaff-icon-button-- Icon button used with icon fontsdaff-raised-button- Rectangular contained button with background color and elevationdaff-stroked-button-- Rectangular outlined button with no background color
The default color of a button is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
For select button types,
whiteandthemeshould be used on a darker background in order to have sufficient contrast.
Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
Supported statuses: warn | danger | success
The size of a button can be changed by using the size property. The size of all the button variants will default to md if no size is defined. This can be changed to one of the supported sizes.
Supported Sizes: sm | md | lg
Daffodil uses native <a> and <button> HTML elements to ensure an accessible experience by default. The <button> element should be used when a clickable action is performed within the same page. The <a> element should be used to navigate users to a new page or to a different target on the same page.
Buttons and links containing only icons (<daff-icon-button>) need to be given meaningful labels using aria-label or aria-labelledby.