---
title: "Label"
description: "The resource's label, or the current Canvas's, in the reader's language, in the element you choose."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/label
version: "4"
---

# Label

\<Clover.Label /> (web components: \<clover-label>)0.5 kB added to a page with a Root, gzipped (web components: 1 kB added to a page with a \<clover-root>, styles included, gzipped)

The resource’s label, or the current Canvas’s, in the reader’s language.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Label as="p" of="manifest" />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-label as="p" of="manifest"></clover-label>
</clover-root>
```

## API reference

Reads `label` from the Root’s resource, as plain text, and renders a `span`. It renders nothing while there is no label. Its other props, and its `ref`, go to its element.

**React**

| Prop        | Type                     | Default      | Description                                                       |
| ----------- | ------------------------ | ------------ | ----------------------------------------------------------------- |
| `of`        | `"manifest" \| "canvas"` | `"manifest"` | Whose label: the resource’s, or the Canvas the reader is on.      |
| `label`     | language map or `string` | —            | A label to show instead of the Root’s. Outside a `Root`, the one. |
| `as`        | element type             | `"span"`     | The element to render: a heading, a paragraph, any other.         |
| `className` | `string`                 | —            | Added to `clover-label`.                                          |

**Web components**

### `<clover-label>`

A label, as Label draws it, marked with the language it is in. Inside a clover-root, the Manifest's or the Canvas's; alone, the one it is given. Nothing is drawn while there is none, so a heading is never left empty.

| Name     | Type                                                                                         | Default    | Description                                                                                       |
| -------- | -------------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------- |
| `of`     | `"manifest" \| "canvas"`                                                                     | `manifest` | Whose label: the Manifest's, or the Canvas in view's.                                             |
| `as`     | `"span" \| "p" \| "div" \| "strong" \| "em" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `span`     | The element to draw: span, p, div, strong, em, or a heading, h1 to h6, to fit the page's outline. |
| `label`  | `string (a URL or JSON)`                                                                     | —          | A label to show instead: text, or a IIIF language map as JSON. Outside a root, the label to show. |
| `.label` | `string \| Record<string, string[]> \| null`                                                 | —          | As a property: A label to show instead, as text or a IIIF language map.                           |

## Examples

### As a heading

Use `as` to make it a heading, at the level that fits your page’s outline: here, under an `h3`, an `h4`.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Label as="h4" />
```

**Web components**

```html
<clover-label as="h4"></clover-label>
```

### The current Canvas

Use `of="canvas"` for the label of the Canvas in view. It changes as the reader moves.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Body />
<Clover.Label of="canvas" as="p" />
```

**Web components**

```html
<clover-body></clover-body> <clover-label of="canvas" as="p"></clover-label>
```

### In its own language

A label is read in the Root’s `language`, else the page’s, and carries the language it is in as `lang`, so it is read aloud in that language. This newspaper’s label is German.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json">
  <Clover.Label as="p" />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/content-search/manifest.json">
  <clover-label as="p"></clover-label>
</clover-root>
```

## Previous versions

[Clover 3.x › Label](https://clover.iiif.library.northwestern.edu/docs/3.x/label)

- Inside a `Root` (web components: `<clover-root>`), leave out `label`: it reads the resource’s own.
- 3.x’s `lang` is the Root’s `language`.