> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Feedback

> Toasts, loading states and progress.

## Toast

Available anywhere inside `UIProvider`.

```tsx theme={null}
import { useToast } from '@cskn/ui';

const toast = useToast();

toast.success('Saved');                   // with a success haptic
toast.error('Something went wrong');
const id = toast.show('Uploading…', { duration: 0 });
toast.dismiss(id);
```

| Method | Notes |
| - | - |
| `show(message, { variant?, duration? })` | Returns the toast's id. |
| `success(message, { duration? })` | Success style and haptic. |
| `error(message, { duration? })` | Danger style. |
| `dismiss(id)` | Remove a toast early. |

`duration` is in milliseconds, default 3000; `0` keeps the toast until dismissed. `variant` is `default`, `success` or `danger`.

## Skeleton

Placeholder shapes while content loads.

```tsx theme={null}
import { Skeleton } from '@cskn/ui';

<Skeleton width="60%" height={20} />
<Skeleton circle width={40} height={40} />
```

Props: `width?`, `height?` (default 16), `circle?`, `radius?`.

## Spinner

```tsx theme={null}
<Spinner size={24} />
```

`size` defaults to 20. It inherits the current text color.

## ProgressBar

```tsx theme={null}
import { ProgressBar } from '@cskn/ui';

<ProgressBar value={0.68} label="Storage" showValue />
<ProgressBar value={3} max={5} />
<ProgressBar />   {/* indeterminate */}
```

<ParamField path="value" type="number">From `0` to `1` (or to `max`). Omit for an indeterminate bar.</ParamField>
<ParamField path="max" type="number">Upper bound for `value`.</ParamField>
<ParamField path="height" type="number" default="8">Track thickness in px.</ParamField>
<ParamField path="color" type="string">Fill color. Defaults to the primary token.</ParamField>
<ParamField path="showValue" type="boolean">Show the percentage.</ParamField>
<ParamField path="label" type="ReactNode">Label above the bar.</ParamField>

For inline messages, see [`Callout`](/ui/components/display#callout); for empty lists, [`EmptyState`](/ui/components/display#emptystate).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.