# Marker

Date separators, status lines and typing indicators.

Group: Chat

## Import

```tsx
import { Marker } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function MarkerDemo() {
  return (
    <Stack gap="4">
      <Marker.Separator>Today</Marker.Separator>
      <Marker.Status tone="info">
        <Marker.TypingIndicator />
        Indoku Bot is typing...
      </Marker.Status>
      <Marker.Status tone="success">Pesan terkirim</Marker.Status>
      <Marker.Status tone="error">Gagal ngirim, coba lagi</Marker.Status>
    </Stack>
  )
}
```

## Props

### Status

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `MarkerTone` |  |  |
| `icon` | `ReactNode` |  |  |

`*` = required. Style props and HTML attributes are accepted too.