Entity title

EntityTitle renders the name of an object with an icon, a subtitle and tags. Use it for headers of datasets, pipelines and other entities.

Usage#

import { EntityTitle } from "@clawscale/react";

<EntityTitle icon="th" title="orders_daily" />

Examples#

Basic#

Pass a title and an icon. titleURL turns the title into a link that opens in a new tab.

orders_daily

ingest-orders

Revenue by region

core/entity-title/basic.tsx

import { EntityTitle } from "@clawscale/react";

export default function EntityTitleBasic() {
  return (
    <>
      <EntityTitle icon="th" title="orders_daily" />
      <EntityTitle icon="flow-linear" title="ingest-orders" />
      <EntityTitle icon="dashboard" title="Revenue by region" />
    </>
  );
}

Subtitle#

subtitle adds muted text below the title.

orders_daily

Table in sales, 1,204,331 rows

ingest-orders

Last run 12 minutes ago

core/entity-title/subtitle.tsx

import { EntityTitle } from "@clawscale/react";

export default function EntityTitleSubtitle() {
  return (
    <>
      <EntityTitle icon="th" title="orders_daily" subtitle="Table in sales, 1,204,331 rows" />
      <EntityTitle icon="flow-linear" title="ingest-orders" subtitle="Last run 12 minutes ago" />
    </>
  );
}

Tags#

tags renders after the title. Pass one Tag, or several in a fragment.

ingest-orders

Healthyv14

Runs hourly in us-east-1

core/entity-title/tags.tsx

import { EntityTitle, Tag } from "@clawscale/react";

export default function EntityTitleTags() {
  return (
    <EntityTitle
      icon="flow-linear"
      title="ingest-orders"
      subtitle="Runs hourly in us-east-1"
      tags={
        <>
          <Tag minimal intent="success">
            Healthy
          </Tag>
          <Tag minimal>v14</Tag>
        </>
      }
    />
  );
}

Heading sizes#

heading sets the component that renders the title. The default, Text, inherits the font size. Pass H1 to H6 for larger titles; spacing and subtitle size follow the level.

Revenue by region

Updated 5 minutes ago

Revenue by region

Updated 5 minutes ago

Revenue by region

Updated 5 minutes ago

Revenue by region

Updated 5 minutes ago

core/entity-title/headings.tsx

import { EntityTitle, H2, H4, H6 } from "@clawscale/react";

export default function EntityTitleHeadings() {
  return (
    <div style={{ display: "grid", gap: 20 }}>
      <EntityTitle heading={H2} icon="dashboard" title="Revenue by region" subtitle="Updated 5 minutes ago" />
      <EntityTitle heading={H4} icon="dashboard" title="Revenue by region" subtitle="Updated 5 minutes ago" />
      <EntityTitle heading={H6} icon="dashboard" title="Revenue by region" subtitle="Updated 5 minutes ago" />
      <EntityTitle icon="dashboard" title="Revenue by region" subtitle="Updated 5 minutes ago" />
    </div>
  );
}

Props interface#

interface EntityTitleProps extends Props@clawscale/react

Props	Description
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`ellipsize`	`boolean` = `false` Whether the overflowing text content should be ellipsized.
`fill`	`boolean` Whether the component should expand to fill its container.
`heading`	`React.FC<any>` = `Text` React component to render the main title heading. This defaults to Blueprint's `<Text>` component, * which inherits font size from its containing element(s).
`icon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render in the section's header. Note that the header will only be rendered if `title` is provided.
`loading`	`boolean` = `false` Whether to render as loading state.
`subtitle`	`React.JSX.Element \| string` The content to render below the title. Defaults to render muted text.
`tags`	`React.ReactNode` <Tag> components work best - if multiple, wrap in <React.Fragment>
`title`required	`React.JSX.Element \| string` The primary title to render.
`titleURL`	`string` If specified, the title will be wrapped in an anchor with this URL.