Entity Display

Overview

A general-purpose compound component for displaying an entity with an icon, title, and optional description line. Supports three sizes, two visual variants, hover styling, and measurement-based middle truncation that adapts to inline-flex, button, and other auto-sized containers.

Usage

import { EntityDisplay } from "@tilt-legal/cubitt-components/primitives";

<EntityDisplay size="sm">
  <EntityDisplay.Icon>
    <MimeTypeIcon fileName="report.pdf" />
  </EntityDisplay.Icon>
  <EntityDisplay.Label>
    <EntityDisplay.Title middleTruncate>report.pdf</EntityDisplay.Title>
    <EntityDisplay.Description>PDF Document</EntityDisplay.Description>
  </EntityDisplay.Label>
</EntityDisplay>

Examples

Default Variant

The default variant includes a border and background. Available in sm, md, and lg sizes.

import {
  EntityDisplay,
  MimeTypeIcon,
} from "@tilt-legal/cubitt-components/primitives";

<EntityDisplay size="sm">
  <EntityDisplay.Icon>
    <MimeTypeIcon fileName="Project Proposal.pptx" />
  </EntityDisplay.Icon>
  <EntityDisplay.Label>
    <EntityDisplay.Title middleTruncate>
      Project Proposal.pptx
    </EntityDisplay.Title>
  </EntityDisplay.Label>
</EntityDisplay>

<EntityDisplay hoverable>
  <EntityDisplay.Icon>
    <MimeTypeIcon fileName="Budget_2024_Final_Version.docx" />
  </EntityDisplay.Icon>
  <EntityDisplay.Label>
    <EntityDisplay.Title middleTruncate>
      Budget_2024_Final_Version.docx
    </EntityDisplay.Title>
    <EntityDisplay.Description>Word Document</EntityDisplay.Description>
  </EntityDisplay.Label>
</EntityDisplay>

Ghost Variant

The ghost variant removes the background and padding. At md and lg sizes, the icon gets a circular background. When hoverable is enabled, the title underlines on hover.

import {
  EntityDisplay,
  MimeTypeIcon,
} from "@tilt-legal/cubitt-components/primitives";

<EntityDisplay hoverable size="sm" variant="ghost">
  <EntityDisplay.Icon>
    <MimeTypeIcon fileName="Project Proposal.pptx" />
  </EntityDisplay.Icon>
  <EntityDisplay.Label>
    <EntityDisplay.Title middleTruncate>
      Project Proposal.pptx
    </EntityDisplay.Title>
  </EntityDisplay.Label>
</EntityDisplay>

Middle Truncation

The middleTruncate prop on EntityDisplay.Title enables measurement-based middle truncation that works correctly inside inline-flex containers, buttons, and other auto-sized parents — preserving the end of the text (e.g. file extensions).

API Reference

EntityDisplay (Root)

The root container. Provides context for size, variant, and truncation measurement to all sub-components.

EntityDisplay.Icon

Styled container for the entity icon. Sizes the SVG child based on the root's size and variant. Ghost md/lg renders a circular background with border.

EntityDisplay.Label

Flex column container for title and description. Attaches the measurement ref used by middle truncation.

EntityDisplay.Title

The primary text line. Supports optional measurement-based middle truncation.

EntityDisplay.Description

A secondary text line rendered below the title with muted text color. Always CSS-truncated.