## Feature Examples

### Progress indication
- description: Show the current progress in percentage with `showProgressIndication` prop.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <LinearProgressBar showProgressIndication value={0} />
  <LinearProgressBar showProgressIndication value={50} />
  <LinearProgressBar showProgressIndication value={100} />
</StorybookComponents.Stack>;
```

### Label
- description: Replace the percentage with a custom label using `label` prop, for example the number of completed items.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <LinearProgressBar value={37.6} label="47/125" />
  <LinearProgressBar value={80} label="4 of 5 steps" />
</StorybookComponents.Stack>;
```

### Min and max
- description: Set custom `min` and `max` values when the progress isn't measured on a 0 to 100 scale. The percentage is calculated from that range.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <LinearProgressBar showProgressIndication value={75} min={50} max={150} />
</StorybookComponents.Stack>;
```

### Prefix indication
- description: Add an icon or another node before the bar with `prefixIndication` prop.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <LinearProgressBar
    showProgressIndication
    value={60}
    prefixIndication={<Icons.Upload />}
  />
</StorybookComponents.Stack>;
```

### Skin
- description: Control the appearance with `skin` prop. It supports 5 skins: - `standard` (default) is for common cases. - `success` is best for highlighting the positive effect of the process. - `warning` draws attention to a process that might need the user's action. - `premium` is to prompt users to upgrade their plans to premium subscription. - `neutral` is for low-emphasis contexts.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <LinearProgressBar skin="standard" value={20} />
  <LinearProgressBar skin="success" value={20} />
  <LinearProgressBar skin="warning" value={20} />
  <LinearProgressBar skin="premium" value={20} />
  <LinearProgressBar skin="neutral" value={20} />
</StorybookComponents.Stack>;
```

### Light
- description: Invert the skin of a progress bar with the `light` prop. Use it on dark or colored backgrounds.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Background skin="light">
    <StorybookComponents.Stack padding="24px" width="100%">
      <LinearProgressBar value={20} />
    </StorybookComponents.Stack>
  </StorybookComponents.Background>
  <StorybookComponents.Background skin="dark">
    <StorybookComponents.Stack padding="24px" width="100%">
      <LinearProgressBar light value={20} />
    </StorybookComponents.Stack>
  </StorybookComponents.Background>
</StorybookComponents.Stack>;
```

### Error status
- description: Let users know that the process failed with `error` prop. Add text that explains what went wrong or what to do next with `errorMessage` prop. The message is revealed on hover over the error icon.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <LinearProgressBar error value={20} />
  <LinearProgressBar
    showProgressIndication
    error
    errorMessage="Upload failed. Check your connection and try again."
    value={20}
  />
  <StorybookComponents.Background skin="dark">
    <StorybookComponents.Stack padding="24px" width="100%">
      <LinearProgressBar light error value={20} />
    </StorybookComponents.Stack>
  </StorybookComponents.Background>
</StorybookComponents.Stack>;
```

### Padding
- description: Remove the default vertical padding with `padding="none"`, for example when the bar sits in a table cell or another dense layout.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <LinearProgressBar value={20} />
  <LinearProgressBar value={20} padding="none" />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Upload progress
- description: Use a linear progress bar to show how far a long-running task such as a file upload has progressed.
- example:
```jsx
<Layout>
  <Cell span={6}>
    <Card>
      <Card.Header title="Uploading 3 files" subtitle="12 MB of 40 MB" />
      <Card.Divider />
      <Card.Content>
        <LinearProgressBar
          value={30}
          showProgressIndication
          prefixIndication={<Icons.Upload />}
        />
      </Card.Content>
    </Card>
  </Cell>
</Layout>;
```