Components / Content
Callout
Inline notice in the accent, neutral, up, warning or down tone, with an optional icon.
Extracted fromExplorer
Import
tsx
import { Callout } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Callout } from "@somnia-chain/ui/next"Examples
Tip and warning
Sessions last 24 hours
A session key can place orders without a wallet prompt until it expires or you revoke it.
Sponsor balance is low
Top up the paymaster before it drops below 32 SOMI or sponsored transactions will fail.
examples/callout/default.tsxShow codeHide code
tsx
import { Callout } from "@somnia-chain/ui"
import { Info, TriangleAlert } from "lucide-react"
export default function CalloutExample() {
return (
<div className="flex max-w-2xl flex-col gap-3">
<Callout title="Sessions last 24 hours" icon={<Info className="size-4" />}>
A session key can place orders without a wallet prompt until it expires or you revoke it.
</Callout>
<Callout tone="warn" title="Sponsor balance is low" icon={<TriangleAlert className="size-4" />}>
Top up the paymaster before it drops below 32 SOMI or sponsored transactions will fail.
</Callout>
</div>
)
}Note, success and error
Figures refresh every 30 seconds
A run that started in the last half minute may not be counted yet.
Deployment promoted
Every smoke path answered, and production now serves the new commit.
Runs are stopped
No run starts until an admin turns the stop switch off.
examples/callout/tones.tsxShow codeHide code
tsx
import { Callout } from "@somnia-chain/ui"
import { CircleCheck, Info, OctagonAlert } from "lucide-react"
export default function CalloutTones() {
return (
<div className="flex max-w-2xl flex-col gap-3">
<Callout tone="neutral" title="Figures refresh every 30 seconds" icon={<Info className="size-4" />}>
A run that started in the last half minute may not be counted yet.
</Callout>
<Callout tone="up" title="Deployment promoted" icon={<CircleCheck className="size-4" />}>
Every smoke path answered, and production now serves the new commit.
</Callout>
<Callout tone="down" title="Runs are stopped" icon={<OctagonAlert className="size-4" />}>
No run starts until an admin turns the stop switch off.
</Callout>
</div>
)
}Props
Callout