SnowballSH Callout
Pick a framework. Both use the same recipe, so the styling matches exactly.
Info: reads calmly in the accent hue.
Warning: something needs attention before publishing.
Aurora: a highlight for good news and fresh results.
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "info" | "warn" | "aurora" | info | Color accent for the note. |
Also takes className and children. Anything else passes through to the div.
import { Callout } from "../react/index.js";
export default function CalloutDemo() {
return (
<div className="flex flex-col">
<Callout tone="info">Info: reads calmly in the accent hue.</Callout>
<Callout tone="warn">
Warning: something needs attention before publishing.
</Callout>
<Callout tone="aurora">
Aurora: a highlight for good news and fresh results.
</Callout>
</div>
);
}
Info: reads calmly in the accent hue.
Warning: something needs attention before publishing.
Aurora: a highlight for good news and fresh results.
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "info" | "warn" | "aurora" | info | Color accent for the note. |
Also takes class and snippet children. Anything else passes through to the div.
<script lang="ts">
import { Callout } from "../svelte/index.js";
</script>
<div class="flex flex-col">
<Callout tone="info">Info: reads calmly in the accent hue.</Callout>
<Callout tone="warn"
>Warning: something needs attention before publishing.</Callout
>
<Callout tone="aurora"
>Aurora: a highlight for good news and fresh results.</Callout
>
</div>