# Tier badge

The tier badge shows one holder's tier at a glance: the tier its credential carries, and, when you have the figure, the days it has been held. It is drawn inside your page and carries no key and no fetch of its own: a badge that marks an instrument asks through the one client your page connected.

## The script

Yutai serves the SDK's script at the address below: the script loads once, then the element is written with its facts as attributes.

The script is served today.

Embed code

```
<script src="https://yutai.com/sdk/v1/yutai-sdk-web.min.js"></script>

<yutai-tier-badge
  tier="Holder"
  tenure-days="145"
></yutai-tier-badge>
```

## The sample

The sample renders the real element here: one badge per tier, the Holder and Steward badges with their days figures, the Patron badge with the tier's word alone.

Sample figures: a simulated holder, not a real credential.

## The attributes

The badge has two draws, one per badge: the tier draw when the badge names a tier, the instrument draw when it names an ISIN instead. The tier draw paints at once; the instrument draw asks the distributor API, so it paints nothing while the ask rides.

| Attribute | What to pass |

| --- | --- |

| `tier` | Required on the tier draw. The tier the badge carries, one of Holder, Steward or Patron. A badge names a tier or an instrument, never both. |

| `tenure-days` | Optional on the tier draw: the days the credential has been held, a number of days of 0 or more, like "145", the same figure the card's tenure-days carries under the same name. Absent, the badge draws the tier's word alone. |

| `isin` | Required on the instrument draw. The ISIN of the instrument the badge marks, written as [the ISIN form](/docs/identifiers#isin-heading): the badge asks the distributor API which benefits the instrument carries, through the connected client your page made with `connectDistributorApi`, and paints the mark that says benefits exist at the company. The tenure-days attribute never rides the instrument draw. |

| `answer` | Optional on the instrument draw. The availability read's own answer for that instrument, as JSON text: the badge draws it instead of asking, so a page whose read happens on its server can hand every badge the row the read answered it with and no key reaches the browser. Write a badge only where your read answered; a company the read answers nothing for wears no badge. |

Each tier paints its own look from its own token pair: --tier-holder, --tier-steward and --tier-patron, each with its foreground. The pairs are bound on the element itself, so a value the distributor sets on the element beats the badge's pack defaults.

## The refusals

The badge never paints input it cannot draw. A refusal happens before anything renders, so the badge keeps its last good paint, and it reaches your page as one yutai-error event, its detail carrying the badge's tag and one plain sentence: a badge with neither a tier nor an isin, a tier the badge does not carry, a days figure that is not a plain decimal or sits below zero, an answer without an isin, a badge that names a tier and an instrument together, tenure-days beside an instrument, an isin that is not an ISIN, an answer that is not JSON, an answer that is not the shape the availability read carries, an answer that answers for another instrument than the badge names, an instrument badge whose page connected the Yutai client with no market, or an instrument badge on a page that has not connected the Yutai client yet.

For a tier the badge does not carry, the sentence is:

> The tier attribute "gold" is not a tier the badge draws. Set tier to Holder, Steward and Patron.

Read [the React page](/docs/react) for the React wrapper, and [the Errors and limits page](/docs/errors) for the plain sentences a refusal carries.