---
title: "Rights"
description: "The rights of the resource, or of the current Canvas, as a link to its license or rights statement."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/rights
version: "4"
---

# Rights

\<Clover.Rights /> (web components: \<clover-rights>)0.2 kB added to a page with a Root, gzipped (web components: 7 kB added to a page with a \<clover-root>, styles included, gzipped)

The resource’s rights, or the current Canvas’s: a link to its license or rights statement.

> **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.Rights />
</Clover.Root>
```

**Web components**

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

## API reference

Reads `rights` from the Root’s resource and renders a link to it, the address as its text. It renders nothing while there is none. Its other props go to the `a`.

**React**

| Prop        | Type                     | Default      | Description                                                          |
| ----------- | ------------------------ | ------------ | -------------------------------------------------------------------- |
| `of`        | `"manifest" \| "canvas"` | `"manifest"` | Whose rights: the resource’s, or the Canvas the reader is on.        |
| `value`     | `string`                 | —            | An address to link instead of the Root’s. Outside a `Root`, the one. |
| `className` | `string`                 | —            | Added to `clover-rights`.                                            |

**Web components**

### `<clover-rights>`

The rights: a link to the license or rights statement.

| Name     | Type                     | Default    | Description                                                                                   |
| -------- | ------------------------ | ---------- | --------------------------------------------------------------------------------------------- |
| `of`     | `"manifest" \| "canvas"` | `manifest` | Whose property: the Manifest's, or the Canvas in view's.                                      |
| `value`  | `string (a URL or JSON)` | —          | A rights URL, instead of the root's: as text, a URL or JSON. Outside a root, the one to show. |
| `.value` | `string \| null`         | —          | As a property: A rights URL, instead of the root's.                                           |

## Examples

### Under a heading

The link’s text is the address, as the property gives it, so place it where its context says what it is, as the [Panel](https://clover.iiif.library.northwestern.edu/docs/panel)’s About section does.

> **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.
>
> #### Rights

**React**

```jsx
<h4>Rights</h4>
<Clover.Rights />
```

**Web components**

```html
<h4>Rights</h4>
<clover-rights></clover-rights>
```

### An address of your own

Give it `value` to link an address you hold, in a `Root` (web components: `<clover-root>`) or on its own.

> **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.Rights value="http://creativecommons.org/publicdomain/mark/1.0/" />
```

**Web components**

```html
<clover-rights
  value="http://creativecommons.org/publicdomain/mark/1.0/"></clover-rights>
```
