Components

DescriptionList

Shows the fields of a record as term and value pairs, with native dl, dt and dd elements.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook for the controls.

Live example, StorybookOpen in Storybook

Default

Pass the rows with items. Each row has a term and a value. The default layout is inline: from 1024 px the term is on the left and the value on the right; on narrower screens they stack.

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

import { DescriptionList } from '@bigbang/ui';

export default function Default() {
  return (
    <DescriptionList
      className="w-full max-w-2xl"
      items={[
        { id: 'name', term: 'Name', details: 'First item' },
        { id: 'status', term: 'Status', details: 'Active' },
        { id: 'created', term: 'Created', details: '28 October 2026' },
        { id: 'description', term: 'Description', details: 'A short description goes here.' },
      ]}
    />
  );
}

Layouts

inline puts the term left of the value, stacked puts it above, and grid lays rows out in columns. columns (1, 2 or 3) is for grid only and applies from 1024 px; on narrower screens it is one column.

Inline

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

Stacked

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

Grid

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

import { DescriptionList } from '@bigbang/ui';

const items = [
  { id: 'name', term: 'Name', details: 'First item' },
  { id: 'status', term: 'Status', details: 'Active' },
  { id: 'created', term: 'Created', details: '28 October 2026' },
  { id: 'description', term: 'Description', details: 'A short description goes here.' },
];

export default function Layouts() {
  return (
    <div className="flex w-full max-w-3xl flex-col gap-4xl">
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Inline</h3>
        <DescriptionList layout="inline" items={items} dividers />
      </section>
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Stacked</h3>
        <DescriptionList layout="stacked" items={items} dividers />
      </section>
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Grid</h3>
        <DescriptionList layout="grid" columns={2} items={items} dividers />
      </section>
    </div>
  );
}

Action at the end of a row

action puts a control at the end of the row, such as copy or edit. Each action is its own tab stop.

Identifier: ITEM-1024
Name: First item
Description: A short description goes here.

import { Button, DescriptionList } from '@bigbang/ui';

export default function WithActions() {
  return (
    <DescriptionList
      className="w-full max-w-2xl"
      dividers
      items={[
        {
          id: 'identifier',
          term: 'Identifier',
          details: 'ITEM-1024',
          action: (
            <Button size="sm" variant="tertiary">
              Copy
            </Button>
          ),
        },
        { id: 'name', term: 'Name', details: 'First item' },
        {
          id: 'description',
          term: 'Description',
          details: 'A short description goes here.',
          action: (
            <Button size="sm" variant="tertiary">
              Edit
            </Button>
          ),
        },
      ]}
    />
  );
}

Empty and long values

An empty value (null, undefined, empty string) shows a dash (—) and tells screen readers “no information”. A long value wraps, even without spaces.

Name: First item
Status: bilgi yok
Description: A very long value that still wraps when it has no spaces: ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

import { DescriptionList } from '@bigbang/ui';

export default function EmptyAndLong() {
  return (
    <DescriptionList
      className="w-full max-w-md"
      dividers
      items={[
        { id: 'name', term: 'Name', details: 'First item' },
        { id: 'status', term: 'Status', details: null },
        { id: 'description', term: 'Description', details: 'A very long value that still wraps when it has no spaces: ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789' },
      ]}
    />
  );
}

With parts

For custom rows, use the DescriptionList.Item, Term, Details and Action parts.

Name: First item
Status: bilgi yok

import { DescriptionList } from '@bigbang/ui';

export default function Parts() {
  return (
    <DescriptionList className="w-full max-w-2xl" size="sm">
      <DescriptionList.Item>
        <DescriptionList.Term>Name</DescriptionList.Term>
        <DescriptionList.Details>First item</DescriptionList.Details>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Status</DescriptionList.Term>
        <DescriptionList.Details />
      </DescriptionList.Item>
    </DescriptionList>
  );
}

Light and dark mode

DescriptionList takes every colour from text and border tokens.

Inline

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

Stacked

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

Grid

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

Inline

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

Stacked

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

Grid

Name: First item
Status: Active
Created: 28 October 2026
Description: A short description goes here.

import { DescriptionList } from '@bigbang/ui';

const items = [
  { id: 'name', term: 'Name', details: 'First item' },
  { id: 'status', term: 'Status', details: 'Active' },
  { id: 'created', term: 'Created', details: '28 October 2026' },
  { id: 'description', term: 'Description', details: 'A short description goes here.' },
];

export default function Layouts() {
  return (
    <div className="flex w-full max-w-3xl flex-col gap-4xl">
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Inline</h3>
        <DescriptionList layout="inline" items={items} dividers />
      </section>
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Stacked</h3>
        <DescriptionList layout="stacked" items={items} dividers />
      </section>
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Grid</h3>
        <DescriptionList layout="grid" columns={2} items={items} dividers />
      </section>
    </div>
  );
}