Implementation:TobikoData Sqlmesh Metadata Component

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components
Last Updated	2026-02-07 20:00 GMT

Overview

A horizontal label-value pair component for displaying metadata with consistent styling and truncation.

Description

The Metadata component displays key-value pairs in a horizontal layout with justify-between spacing. It wraps content in a HorizontalContainer and applies semantic styling to labels and values. String values automatically receive title attributes for tooltip display on hover, supporting text that may be truncated. Labels use the text-metadata-label CSS variable and are set to shrink-0 to maintain visibility, while values use text-metadata-value with semibold font weight. Both label and value support rendering React nodes for complex content.

Usage

Use Metadata to display property information in a structured format such as model details, configuration settings, or record attributes. The component automatically handles truncation with hover tooltips for long string values. Use React nodes for label or value when additional styling or interactive elements are needed.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/common/src/components/Metadata/Metadata.tsx

Signature

export interface MetadataProps extends React.HTMLAttributes<HTMLDivElement> {
  label: React.ReactNode
  value: React.ReactNode
}

export const Metadata = React.forwardRef<HTMLDivElement, MetadataProps>(
  ({ label, value, className, ...props }, ref) => {
    // Implementation
  },
)

Import

import { Metadata } from '@sqlmesh-common/components/Metadata/Metadata'

I/O Contract

Inputs

Name	Type	Required	Description
label	React.ReactNode	Yes	Label text or element (left side)
value	React.ReactNode	Yes	Value text or element (right side)
className	string	No	Additional CSS classes
ref	React.Ref<HTMLDivElement>	No	Forward ref to container div
...props	React.HTMLAttributes<HTMLDivElement>	No	All standard div attributes

Outputs

Name	Type	Description
element	React.ReactElement	Horizontal container with styled label and value

Usage Examples

// Basic metadata pair
<Metadata label="Model Type" value="INCREMENTAL_BY_TIME_RANGE" />

// Multiple metadata items
<div className="space-y-2">
  <Metadata label="Environment" value="production" />
  <Metadata label="Status" value="Active" />
  <Metadata label="Last Updated" value="2026-02-07" />
</div>

// Long values that truncate
<Metadata
  label="Query"
  value="SELECT * FROM very_long_table_name_that_will_truncate..."
/>

// With React node label
<Metadata
  label={
    <div className="flex items-center gap-2">
      <InfoIcon size={14} />
      <span>Status</span>
    </div>
  }
  value="Running"
/>

// With React node value
<Metadata
  label="Actions"
  value={
    <div className="flex gap-2">
      <Button size="xs">Edit</Button>
      <Button size="xs" variant="destructive">Delete</Button>
    </div>
  }
/>

// Custom styled
<Metadata
  label="Priority"
  value="High"
  className="bg-yellow-50 p-2 rounded"
/>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment