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"] }} />Usage
React
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 (opens in a new tab) | -- | 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.
<Label
label={{ none: ["Self-Portrait Dedicated to Paul Gauguin"] }}
as="h3"
/>HTML Attributes
Label, like all Clover IIIF primitives accept common HTMLElement (opens in a new tab) 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"
/>Language
Additional to being rendered to the DOM like other attributes, the value of lang (opens in a new tab) will couple with InternationalString (opens in a new tab) 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 (opens in a new tab) 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"
/>