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 label={{ none: ["Crossing the Pend d'Oreille - Kalispel"] }} />

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

Usage

React

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

API Reference

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.

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

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

HTML Attributes

Label, like all Clover IIIF primitives accept common 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.

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

<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 will couple with InternationalString  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  language code.

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

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