Button - Intelligence Community Design System

Show navigation section

Component demo

Interactive example

Add to order

View coffees

Find out more

Cancel order

Web component

React

Show full code

<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 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 - string \| undefined
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 - string \| undefined
Property formenctype Attribute formenctype	The way the submitted form data is encoded. type: string - string \| undefined
Property formmethod Attribute formmethod	The HTTP method used to submit the form. type: string - string \| undefined
Property formnovalidate Attribute formnovalidate	If`true` , the form will not be validated when submitted. type: boolean - boolean \| undefined
Property formtarget Attribute formtarget	The place to display the response from submitting the form. It overrides the target attribute of the button's form owner. type: string - string \| undefined
Property fullWidth Attribute full-width	If`true` , the button will fill the width of the container. type: boolean	false
Property href Attribute href	The URL that the link points to. This will render the button as an "a" tag. type: string - string \| undefined
Property hreflang Attribute hreflang	The human language of the linked URL. type: string - string \| undefined
Property loading Attribute loading	If`true` , the button will be in loading state. type: boolean	false
Property monochrome Attribute monochrome	If`true` , the button will display as monochromatic in either`light` or`dark` theme. type: boolean	false
Property multiple Attribute multiple	If`fileUpload` is set to`true` , this boolean determines whether multiple files are accepted. type: boolean	false
Property referrerpolicy Attribute referrerpolicy	How much of the referrer to send when following the link. type: ReferrerPolicy - "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url" \| undefined
Property rel Attribute rel	The relationship of the linked URL as space-separated link types. type: string - string \| undefined
Property selectedFiles	The list of the files that have been selected by a user. type: FileList - FileList \| undefined
Property size Attribute size	The size of the button to be displayed. type: IcSizes - "large" \| "medium" \| "small"	"medium"
Property target Attribute target	The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). type: string - string \| undefined
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"
Property tooltipFixedPositioning Attribute tooltip-fixed-positioning	Setting to`true` can help in situations where tooltip content is clipped by a parent element. type: boolean	false
Property tooltipPlacement Attribute tooltip-placement	The position of the tooltip in relation to the button. type: IcButtonTooltipPlacement - "bottom" \| "left" \| "right" \| "top"	"bottom"
Property transparentBackground Attribute transparent-background	If`true` , the secondary & tertiary variants of button will have a transparent background when not hovered, pressed or loading. type: boolean	true
Property type Attribute type	The type of the button. type: IcButtonTypes - "button" \| "reset" \| "submit"	"button"
Property variant Attribute variant	The variant of the button to be displayed. type: IcButtonVariants - "destructive" \| "icon" \| "icon-destructive" \| "icon-primary" \| "icon-secondary" \| "icon-tertiary" \| "primary" \| "secondary" \| "tertiary"	"primary"

Property

Attribute

IffileUpload is set totrue , this is the accepted list of file types.

type: string

Default: "*"

Property

disableTooltip

Attribute

disable-tooltip

Iftrue , 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

Default: false

Property

disabled

Attribute

disabled

Iftrue , the button will be in disabled state.

type: boolean

Default: false

Property

download

Attribute

download

Iftrue , the user can save the linked URL instead of navigating to it.

type: string | boolean - boolean | string

Default: false

Property

dropdown

Attribute

dropdown

Iftrue , the button will show a dropdown icon.

type: boolean

Default: false

Property

dropdownExpanded

Attribute

dropdown-expanded

Iftrue , the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.

type: boolean

Default: 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

Default:ic-button-file-upload-input-${buttonIds++}

Property

fileUpload

Attribute

file-upload

Iftrue , when the button is clicked the native file explorer will be launched.

type: boolean

Default: false

Property

form

Attribute

form

The <form> element to associate the button with.

type: string - string | undefined

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 - string | undefined

Property

formenctype

Attribute

formenctype

The way the submitted form data is encoded.

type: string - string | undefined

Property

formmethod

Attribute

formmethod

The HTTP method used to submit the form.

type: string - string | undefined

Property

formnovalidate

Attribute

formnovalidate

Iftrue , the form will not be validated when submitted.

type: boolean - boolean | undefined

Property

formtarget

Attribute

formtarget

The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.

type: string - string | undefined

Property

fullWidth

Attribute

full-width

Iftrue , the button will fill the width of the container.

type: boolean

Default: false

Property

href

Attribute

href

The URL that the link points to. This will render the button as an "a" tag.

type: string - string | undefined

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

type: string - string | undefined

Property

Attribute

Iftrue , the button will be in loading state.

type: boolean

Default: false

Property

monochrome

Attribute

monochrome

Iftrue , the button will display as monochromatic in eitherlight ordark theme.

type: boolean

Default: false

Property

multiple

Attribute

multiple

IffileUpload is set totrue , this boolean determines whether multiple files are accepted.

type: boolean

Default: false

Property

referrerpolicy

Attribute

referrerpolicy

How much of the referrer to send when following the link.

Property

rel

Attribute

rel

The relationship of the linked URL as space-separated link types.

type: string - string | undefined

Property

selectedFiles

The list of the files that have been selected by a user.

type: FileList - FileList | undefined

Property

size

Attribute

size

The size of the button to be displayed.

type: IcSizes - "large" | "medium" | "small"

Default: "medium"