import * as React from "react";
/**
 * Filled circle badge holding a numeral or roman numeral, used for TOC page
 * numbers and pillar timeline steps.
 * @dsCard components/editorial/editorial.card.html
 * @startingPoint section="Editorial" subtitle="Numbered/roman-numeral circle badge" viewport="700x160"
 */
export interface NumberBadgeProps {
  value: React.ReactNode;
  /** @default "blue" */
  tone?: "blue" | "navy" | "teal" | string;
  /** Diameter in px. @default 64 */
  size?: number;
  style?: React.CSSProperties;
}
export function NumberBadge(props: NumberBadgeProps): JSX.Element;