Free React Email Usage Limit Template

import * as React from 'react';

import {
  Band,
  BodyText,
  Brand,
  colors,
  CTAButton,
  Display,
  EmailLayout,
  InlineLink,
  Kicker,
  Lead,
  Meter,
  Note,
} from './components';

export interface UsageLimitEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  label?: string;
  kicker?: string;
  headline?: React.ReactNode;
  lead?: React.ReactNode;
  /** How full the meter is, 0–100. */
  percent?: number;
  body?: React.ReactNode;
  cta?: { label: string; href: string };
  note?: React.ReactNode;
}

/**
 * Usage limit — a warning that reads as information rather than a threat. The
 * meter carries the message; the copy explains what actually happens past it.
 */
export function UsageLimitEmail({
  brand,
  subject = 'You’re at 82% of your monthly events',
  preview = '1.64M of 2M events used with 7 days left in the cycle.',
  label = 'Usage',
  kicker = '82% of monthly events used',
  headline = (
    <>
      YOU’RE
      <br />
      RUNNING
      <br />
      HOT.
    </>
  ),
  lead = (
    <>
      {'Northwind has used '}
      <strong>1.64M of 2M</strong>
      {
        ' events with 7 days left in the cycle. At the current rate you’ll hit the ceiling on '
      }
      <strong>Aug 29</strong>
      {'.'}
    </>
  ),
  percent = 82,
  body = 'Past the limit, events are sampled rather than dropped — you keep trends, you lose precision. Raising the cap takes one click and is prorated.',
  cta = {
    label: 'Raise the event cap',
    href: 'https://sonar.example.com/billing/usage',
  },
  note = (
    <>
      {'Or trim the noise: '}
      <InlineLink href="https://sonar.example.com/docs/filters">
        filter low-value events
      </InlineLink>
      {' before they’re counted.'}
    </>
  ),
}: UsageLimitEmailProps = {}) {
  return (
    <EmailLayout
      brand={brand}
      subject={subject}
      preview={preview}
      label={label}
      accent="lime"
    >
      <Band tone="lime" padding="48px 32px 42px 32px">
        <Kicker color={colors.ink}>{kicker}</Kicker>
        <Display>{headline}</Display>
        <Lead>{lead}</Lead>
      </Band>

      <Band padding="36px 32px">
        <Meter percent={percent} />
        <BodyText>{body}</BodyText>
        <CTAButton href={cta.href}>{cta.label}</CTAButton>
        <Note>{note}</Note>
      </Band>
    </EmailLayout>
  );
}

export default UsageLimitEmail;