ProgressIconButton

The ProgressIconButton is a composite component that displays a circular progress indicator layered on top of an icon button. It’s useful for providing visual feedback for actions that take time, such as downloads or uploads.

<ProgressIconButton icon={Icon.Download} />

Features

The ProgressIconButton is a convenience component for the common use-case of displaying a progress indicator on top of an icon button. It combines the IconButton and CircularProgress components into a single, easy-to-use component. For more information about their features, see the documentation for each component.

Anatomy

1.StackThe root Stack component.

2.IconButtonThe underlying IconButton component.

3.CircularProgressThe CircularProgress indicator.

Reference

`ProgressIconButtonProps`

The ProgressIconButton component accepts all props from the Stack component, except for size, onClick, and children.

Name	Type	Required	Description
`progress`	`number`	`true`	The progress value, from 0 to 100.
`icon`	`Icon`	`true`	The icon to display on the button.
`variant`	`IconButton variant`	`false`	The variant of the icon button. Default is `tertiary`.
`size`	`IconButton size`	`false`	The size of the icon button. Default is `medium`.
`onClick`	`() => void`	`false`	The function to call when the button is clicked.
`disabled`	`boolean`	`false`	Whether the button is disabled.

Tokens

The ProgressIconButton doesn’t have any component tokens itself. Please refer to the IconButton and CircularProgress components for their tokens.