Every Toffee component extends ToffeeBaseProps, giving you a consistent API across all interactions.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'soft' | 'strong' | 'default' | Visual style. soft = reduced opacity, strong = high contrast. |
| speed | 'slow' | 'normal' | 'fast' | number | 'normal' | Animation duration. slow=2000ms, normal=1200ms, fast=600ms. Pass a number for exact ms. |
| tone | 'neutral' | 'brand' | 'muted' | 'neutral' | Color palette applied via CSS variables. Overridable through ToffeeProvider theme. |
| reducedMotion | boolean | 'auto' | 'auto' | 'auto' respects the OS prefers-reduced-motion setting. true/false force the behavior. |
| className | string | — | Additional CSS class applied to the root element. |
| style | React.CSSProperties | — | Inline styles applied to the root element. |
| as | React.ElementType | component-specific | Render the root as a different HTML element or React component. |
All components accept a slots prop with three standard slots:
| Prop | Type | Default | Description |
|---|---|---|---|
| slots.before | ReactNode | — | Rendered before the main content. |
| slots.after | ReactNode | — | Rendered after the main content. |
| slots.overlay | (state) => ReactNode | — | Render prop that receives the component live state (progress, done, loaded, etc.). |
// Slots example
<ShimmerText
tone="brand"
slots={{
before: <Icon name="sparkle" />,
after: <Badge>AI</Badge>,
overlay: ({ isAnimating }) =>
isAnimating ? <Spinner /> : null,
}}
>
Generating...
</ShimmerText>Tokens are exported from the server-safe entry point for use in custom components.