# Button

<flow-button>

Stable

Buttons represent actions that are available to the user.

Buttons can include an optional icon and a label. A number of styles are provided including 'solid', 'outlined', 'compact' and 'icon-only'. The button component can be used like the standard HTML button element. Attach a click handler to respond to button clicks.

See <flow-icon> for information on how to specify a built-in icon or icon URL.

# Examples

# Button Styles

The following button styles are provided. Use color and style to draw attention to primary actions.

# Colors

Use the color attribute to set the button's color from the application palette.

# Disabled Buttons

Add the disabled attribute to disable interaction with the button.

# Compact Buttons

Use compact buttons in toolbars and other UI elements where a smaller button is required.

# Buttons with Icons

Icons can be added before or after the button label. By default, icons are positioned before the label. Add the trailing-icon attribute to position the icon after the label.

# Icon-Only Buttons

Add the icon-attribute button to display an icon-only button. Icon-only buttons are useful for creating compact tool palettes.

# Link Buttons

Specify the href attribute to create a link button, which will open the specified URL in a new tab when clicked. Specify the download attribute to download the linked file instead of opening it in the browser.

# Properties

Property	Description	Type	Default
`color`	The color of the component. Colors are taken from the application palette.	`"danger" \| "gray" \| "primary" \| "secondary" \| "success" \| "warning"`
`compact`	Set to `true` to display a smaller-sized button with reduced margins.	`boolean`	`false`
`disabled`	Set to `true` to disable interaction with the button.	`boolean`	`false`
`download`	Specify that the linked file should be downloaded using this filename. Only used when `href` is set.	`string`
`href`	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	`string`
`icon`	Set to display an icon on the button. The property can be the name of a built-in icon, a URL of an SVG file, or an SVG data URI.	`string`
`iconButton` `icon-button`	Set to `true` to display an 'icon-only' button with no button body or label. Note that the default color of an 'icon-only' button is the current text color. Use the `color` property to select a different color from the application palette.	`boolean`	`false`
`label`	If set, specifies the button label text. Otherwise, the text content of the element is used as the button label text.	`string`
`outlined`	Set to display an 'outlined' button.	`boolean`	`false`
`solid`	Set to display a 'solid' button.	`boolean`	`false`
`submit`	Set to 'true' to indicate that activating the button should submit the form. Ignored when `href` is set.	`boolean`	`false`
`target`	Specify a target for opening the link. Only used when `href` is set.	`"_blank" \| "_parent" \| "_self" \| "_top"`
`trailingIcon` `trailing-icon`	Set to `true` to display the icon after the label (to the right in LTR mode).	`boolean`	`false`

# Slots

Slot	Description
`(default)`	The button label. Alternatively, specify using the `label` attribute.

# CSS Custom Properties

Name	Description
`--color`	Color of the button (default: gray)
`--solid-text-color`	Text color of solid button (default: primary contrast)

# CSS Parts

Name	Description
`icon`	The button icon.
`label`	The button label.

← Busy Overlay Chart →