Callout

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

export default function CalloutBasic() {
  return (
    <Callout title="Backfill scheduled">
      The orders_daily backfill starts at 02:00 UTC and takes about 40 minutes. Queries on this dataset may return
      partial results until it finishes.
    </Callout>
  );
}

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

export default function CalloutIntent() {
  return (
    <>
      <Callout intent="primary" title="New schema version">
        orders_daily v14 adds the fulfillment_region column.
      </Callout>
      <Callout intent="success" title="Sync complete">
        1,204,331 rows loaded from us-east-1 in 3 minutes.
      </Callout>
      <Callout intent="warning" title="Quota at 85%">
        The analytics warehouse throttles queries above 100%.
      </Callout>
      <Callout intent="danger" title="Pipeline failed">
        ingest-orders stopped at step 3 of 5. Check the run log.
      </Callout>
    </>
  );
}

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

export default function CalloutCompact() {
  return (
    <>
      <Callout compact intent="primary">
        Showing cached results from 09:40 UTC.
      </Callout>
      <Callout compact intent="warning" title="Partial results">
        2 of 14 shards timed out. Totals may be low.
      </Callout>
    </>
  );
}

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

export default function CalloutMinimal() {
  return (
    <>
      <Callout minimal title="Read only">
        This dataset is managed by the finance team.
      </Callout>
      <Callout minimal intent="danger" title="Credentials expire in 2 days">
        Rotate the warehouse key before Friday to keep syncs running.
      </Callout>
    </>
  );
}