---
describes: Metric
---

The Metric component displays 'value' and 'label'. The default alignment is 'center'.

```javascript
---
type: example
---
  <Metric textAlign="start" renderLabel="Grade" renderValue="80%" />
```

The Metric component can be set to align 'start'.

```javascript
---
type: example
---
  <Metric renderLabel="Grade" renderValue="80%" />
```

The Metric component can be set to align 'end'.

```javascript
---
type: example
---
  <Metric textAlign="end" renderLabel="Grade" renderValue="80%" />
```