Display Field

Overview

Display Field presents a read-only value — such as an ID, hash, key, or DID — in a bordered, surfaced container. By default it includes a CopyButton so users can copy the value in one click. It supports an optional labelled prefix, status variants with matching icons, truncation strategies for long values, custom action buttons, and an expandable slot for supplementary content.

It sits on the elevation scale via the elevation prop (defaulting to base), so it can be nested inside cards and other surfaces without clashing.

Usage

Import the component:

import { DisplayField } from "@eqtylab/equality";

The value is passed as children:

<DisplayField>zQ3shrGxRrYyWixJGrr45jJ1MEY76YQZ4KVbt9CYRsTWZ5MWV</DisplayField>

The copy button uses the string children as its value, so copy only works when children is a plain string.

Variants

Neutral

Neutral with Prefix

Neutral Check with Prefix

neutralCheck shows a check icon like success, but keeps the neutral coloring.

Success with Prefix

The success and failure variants show a status icon alongside the prefix (a check and a warning triangle respectively).

Failure with Prefix

Truncation

Long values can be shortened with the truncate prop. true truncates at the end with an ellipsis, while "middle" keeps the start and end visible (useful for hashes and keys where both ends matter). Left as false, the value scrolls horizontally.

End Truncated

Middle Truncated

Horizontall Scroll

Actions

The copy button is shown by default. Set copy={false} to hide it, and pass actions to render your own buttons before the copy button.

Without Copy Button

With Additional Action

Copy Disabled with Custom Actions

Usage

<DisplayField
  copy={false}
  actions={
    <>
      <IconButton
        name="ExternalLink"
        label="Open"
        size="sm"
        onClick={handleOpen}
      />
      <IconButton name="Share2" label="Share" size="sm" onClick={handleShare} />
    </>
  }
>
  zQ3shrGxRrYyWixJGrr45jJ1MEY76YQZ4KVbt9CYRsTWZ5MWV
</DisplayField>

Slot

Use the slot prop to render supplementary content in a separate section beneath the value — for example related metadata or an empty-state message.

Elevations

Use the elevation prop with the ELEVATION constant to place the field on the elevation scale. base is the default. These examples are nested in a Card to show the effect.

Sunken

Base (default)

Raised

Overlay

Slots

Props