---
id: Button
section: components
---

import { useState } from 'react';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';

## Demos 

### Progress button

The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. 

Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 

```ts file="./examples/ButtonProgress.tsx"

```