## Feature Examples

### Status
- description: Control the indication type with the `status` prop: - `error` - use it to highlight invalid values, failed actions and processes. - `warning` - use it to highlight areas that require extra attention, like if a password has been compromised. - `success` - use it to highlight valid values, successful actions or processes. - `loading` - use it to show that an input value is being loaded.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack alignItems="center">
    <StatusIndicator status="error" />
    <Text>Error</Text>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack alignItems="center">
    <StatusIndicator status="warning" />
    <Text>Warning</Text>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <StatusIndicator status="success" />
    <Text>Success</Text>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <StatusIndicator status="loading" />
    <Text>Loading</Text>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Message
- description: Explain the status with a `message` prop. The message is revealed in a tooltip when the users' mouse hovers over the status icon.
- example:
```jsx
<StatusIndicator message="Message in a tooltip explains the status" />;
```

### Tooltip placement
- description: Position the tooltip with the `tooltipPlacement` prop: - `top` (default) - `right` - `bottom` - `left`
- example:
```jsx
<StorybookComponents.Stack alignItems="center">
  <Text>Top:</Text>
  <StatusIndicator message="Top" tooltipPlacement="top" />
  <Text>Left:</Text>
  <StatusIndicator message="Left" tooltipPlacement="left" />
  <Text>Bottom:</Text>
  <StatusIndicator message="Bottom" tooltipPlacement="bottom" />
  <Text>Right:</Text>
  <StatusIndicator message="Right" tooltipPlacement="right" />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Built-in part of form elements
- description: A status indicator is used as a building block for a variety of form components that require validation or data processing. Avoid using these indicators for status messages unless absolutely necessary, like for very compact layouts. Showing the status message directly below the component is preferred in all default cases. For this, use `<FormField/>` prop `statusMessage`.
- example:
```jsx
<Layout gap="48px">
  <Cell span={4}>
    <Box direction="vertical" gap="12px">
      <Heading size="tiny">For narrow layouts only:</Heading>
      <Box direction="vertical" gap="40px">
        <FormField label="Product name">
          <Input status="error" statusMessage="This field is mandatory" />
        </FormField>
        <FormField label="Select color">
          <AutoComplete
            status="warning"
            value="Green"
            statusMessage="This color already exists"
          />
        </FormField>
      </Box>
    </Box>
  </Cell>
  <Cell span={8}>
    <Box direction="vertical" gap="12px">
      <Heading size="tiny">For all default cases:</Heading>
      <FormField
        label="Product name"
        status="error"
        statusMessage="This field is mandatory"
      >
        <Input />
      </FormField>
      <FormField
        label="Select color"
        status="warning"
        statusMessage="This color already exists"
      >
        <AutoComplete value="Green" />
      </FormField>
    </Box>
  </Cell>
</Layout>;
```