Button

BETA

Component demo

Interactive example

Web component

React

<ic-buttonid='my-button'variant="primary">Add to order</ic-button>
<ic-buttonvariant="secondary">View coffees</ic-button>
<ic-buttonvariant="tertiary">Find out more</ic-button>
<ic-buttonvariant="destructive">Cancel order</ic-button>

<IcButtonvariant="primary"onClick={(ev)=>console.log(ev)}>
  Add to order
</IcButton>
<IcButtonvariant="secondary">View coffees</IcButton>
<IcButtonvariant="tertiary">Find out more</IcButton>
<IcButtonvariant="destructive">Cancel order</IcButton>

Button details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property accept Attribute accept	If`fileUpload` is set to`true` , this is the accepted list of file types. type: string	"*"
Property appearance Attribute appearance	The appearance of the button, e.g. dark, light, or the default. type: IcThemeForeground - "dark" \| "default" \| "light"	"default"
Property disableTooltip Attribute disable-tooltip	If`true` , the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied. type: boolean	false
Property disabled Attribute disabled	If`true` , the button will be in disabled state. type: boolean	false
Property download Attribute download	If`true` , the user can save the linked URL instead of navigating to it. type: string \| boolean - boolean \| string	false
Property dropdown Attribute dropdown	If`true` , the button will show a dropdown icon. type: boolean	false
Property dropdownExpanded Attribute dropdown-expanded	If`true` , the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true. type: boolean	false
Property fileInputName Attribute file-input-name	The name of the control for the file input, which is submitted with the form data. type: string	`ic-button-file-upload-input-${buttonIds++}`
Property fileUpload Attribute file-upload	If`true` , when the button is clicked the native file explorer will be launched. type: boolean	false
Property form Attribute form	The <form> element to associate the button with. type: string
Property formaction Attribute formaction	The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner. type: string
Property formenctype Attribute formenctype	The way the submitted form data is encoded. type: string
Property formmethod Attribute formmethod	The HTTP method used to submit the form. type: string
Property formnovalidate Attribute formnovalidate	If`true` , the form will not be validated when submitted. type: boolean
Property formtarget Attribute formtarget