# DetailRow (/docs/products/dash-dots/reference/components/detail-row)

Long values wrap and stay on the right.

**Children:** Nothing

## Example

![The DetailRow component](/assets/images/dash-dots/components/detail-row.webp)

```xml title="view.dml"
<View variant="card" gap="none">
  <DetailRow label="Reference" value="AC-2041" />
  <DetailRow label="Status" value="Paid" tone="success" />
  <DetailRow label="Total" value="SLE 120.00" weight="bold" />
</View>
```

## Props

| Prop                                                                   | Type                                                             | What it is                                              |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------- |
| `label`                                                                | `string`                                                         |                                                         |
| `value`                                                                | `string`                                                         |                                                         |
| `tone`                                                                 | [tone](/docs/products/dash-dots/reference/components#tones)      | The value's tone and weight. The label is always muted. |
| `weight`                                                               | `regular`, `medium`, `bold`                                      | Default: `regular`.                                     |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing) | Space inside its edges, all round or on one side.       |

## Events

None.