---
title: "Label (3.x)"
description: "Label, a IIIF resource's name, from its label, in its language. Clover 3.x (@samvera/clover-iiif), the earlier version, kept for reference."
url: https://clover.iiif.library.northwestern.edu/docs/deprecated-versions/label
version: "3.x, the earlier version, superseded by Clover 4"
---

> This page documents **Clover 3.x**, `@samvera/clover-iiif`, the earlier version of Clover, kept here for reference. These docs lead with Clover 4: [Get started](https://clover.iiif.library.northwestern.edu/docs).

# Label

The `Label` component is used to display the label of a resource. It is used in the following contexts: Manifest, Canvas, Range, Annotation, AnnotationPage, Collection, and Manifest. It is a string or an object with language keys and string values.

[label ↗](https://iiif.io/api/presentation/3.0/#label)

### Code

```jsx
<Label label={{ none: ["Crossing the Pend d'Oreille - Kalispel"] }} />
```

### HTML

```html
<span class="c-PJLV">Crossing the Pend d'Oreille - Kalispel</span>
```

## Usage

### React

```jsx
import { Label } from "@samvera/clover-iiif/primitives";
 
const CustomLabel = ({ label }) => {
  return <Label label={label} />;
};
 
export default CustomLabel;
```

## API Reference

| Prop        | Type                                                                 | Default | Required |
| ----------- | -------------------------------------------------------------------- | ------- | -------- |
| `as`        | `span`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `label`, `dt`, `dd` | `span`  | —        |
| `label`     | [label](https://iiif.io/api/presentation/3.0/#label)                 | —       | **Yes**  |
| `className` | `string`, `undefined`                                                | —       | —        |
| `style`     | `CSSProperties`, `undefined`                                         | —       | —        |
| `lang`      | `string`, `undefined`                                                | —       | —        |
| `title`     | `string`, `undefined`                                                | —       | —        |
| `data-*`    | `string`, `undefined`                                                | —       | —        |
| `aria-*`    | `AriaAttributes`, `undefined`                                        | —       | —        |

### Custom Element

The `Label` component can be rendered as `span`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `label`, `dt`, or `dd`. The default is `span`.

### Code

```jsx
<Label
  label={{ none: ["Self-Portrait Dedicated to Paul Gauguin"] }}
  as="h3"
/>
```

### HTML

```html
<h3 class="c-PJLV">Self-Portrait Dedicated to Paul Gauguin</h1>
```

### HTML Attributes

`Label`, like all Clover IIIF primitives accept common [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) attributes. Use the JSX style `className` prop to add custom classes. The same attribute methodology can be used for `id`, `style`, `title`, `data-*`, and `aria-*` props.

### Code

```jsx
<Label
  label={{ none: ["Self-Portrait Dedicated to Paul Gauguin"] }}
  className="custom-label-class"
/>
```

### HTML

```html
<span class="c-PJLV custom-label-class">
  Self-Portrait Dedicated to Paul Gauguin
</span>
```

### Language

Additional to being rendered to the DOM like other attributes, the value of [`lang`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang) will couple with [InternationalString](https://github.com/IIIF-Commons/presentation-3-types/blob/main/iiif/descriptive.d.ts#L6-L8) props to output the denoted `label`, `value`, `summary` entries. If `lang` is undefined, entries will default to the first entry in the array index. The value of `lang` should be a two letter [BCP 47](https://datatracker.ietf.org/doc/html/rfc5646) language code.

### Code

```jsx
<Label
  label={{
    en: ["Notes from staging and environment meetings"],
    fr: ["Notes des réunions de mise en scène et d'environnement"],
  }}
  lang="fr"
/>
```

### HTML

```html
<span lang="fr" class="c-PJLV">
  Notes des réunions de mise en scène et d'environnement
</span>
```