---
title: "Display Field"
description: "Display Field with sizes and variants"
source: "Equality"
---
import {
  DisplayFieldDemo,
  DisplayFieldWithActionsDemo,
  DisplayFieldWithSlotDemo,
} from "@demo/components/demo/display-field";
import { ELEVATION } from "@eqtylab/equality";

## Neutral

<DisplayFieldDemo client:only="react" />

## Neutral Truncated

<DisplayFieldDemo truncate client:only="react" />

## Neutral Middle Truncated

<DisplayFieldDemo truncate="middle" client:only="react" />

## Success with Prefix

<DisplayFieldDemo prefix="DID" variant="success" client:only="react" />

## Failure with Prefix

<DisplayFieldDemo prefix="DID" variant="failure" client:only="react" />

## Neutral with Prefix

<DisplayFieldDemo prefix="DID" client:only="react" />

## Without Copy Button

<DisplayFieldDemo copy={false} client:only="react" />

## With Additional Action

<DisplayFieldWithActionsDemo client:only="react" />

## Copy Disabled with Custom Actions

<DisplayFieldWithActionsDemo client:only="react" copy={false} />

## With Slot Content

<DisplayFieldWithSlotDemo prefix="Key" client:only="react" />

## Elevations

### Sunken

<DisplayFieldWithSlotDemo
  prefix="Key"
  client:only="react"
  elevation={ELEVATION.SUNKEN}
  withinCard
/>

### Base (default)

<DisplayFieldWithSlotDemo
  prefix="Key"
  client:only="react"
  elevation={ELEVATION.BASE}
  withinCard
/>

### Raised

<DisplayFieldWithSlotDemo
  prefix="Key"
  client:only="react"
  elevation={ELEVATION.RAISED}
  withinCard
/>

### Overlay

<DisplayFieldWithSlotDemo
  prefix="Key"
  client:only="react"
  elevation={ELEVATION.OVERLAY}
  withinCard
/>

### Floating

<DisplayFieldWithSlotDemo
  prefix="Key"
  client:only="react"
  elevation={ELEVATION.FLOATING}
  withinCard
/>