Tip
Compact inline callouts for notes, gotchas, and edge-case guidance. Drop them inside showcase examples, documentation prose, or anywhere you need a non-dismissible note.
Tones
Four tones plus neutral
Pick the tone that matches the urgency of the message.
Good to know
This component ships with five tones. Use info for general notes, neutral for quiet reminders.
Recommended
This is the pattern you should reach for in most cases.
Watch out
Passing a value greater than 100 will clip the progress bar.
Don't do this
Never mutate the Code parameter after OnInitialized — it will break line numbering.
Heads up
This feature was added in v1.2 and is not available in older exports.
<Tip Tone="info" Title="Good to know" Text="General note." />
<Tip Tone="success" Title="Recommended" Text="The pattern to reach for." />
<Tip Tone="warning" Title="Watch out" Text="Potential footgun ahead." />
<Tip Tone="danger" Title="Don't do this" Text="A pitfall that will break things." />
<Tip Tone="neutral" Title="Heads up" Text="A quiet reminder." />With inline code
Rich body via ChildContent
Drop <code>, links, or multiple paragraphs inside.
Razor pitfall
section is a reserved Razor directive keyword — never use it as a variable name. Use navSection or currentSection instead.
Use gap-(--spacing-lg) instead of gap-[--spacing-lg] — the bracket form is treated as a raw literal in Tailwind v4.
<Tip Tone="warning" Title="Razor pitfall">
<p><code>section</code> is a reserved Razor directive keyword —
never use it as a variable name.</p>
</Tip>
<Tip Tone="info">
<p>Use <code>gap-(--spacing-lg)</code> instead of
<code>gap-[--spacing-lg]</code> — the bracket form is
treated as a raw literal in Tailwind v4.</p>
</Tip>Compact
Smaller padding and type
Use inside tight layouts like table cells, form row helpers, or sidebars.
You can combine tones and compact mode freely.
Rate limit: 1,000 requests per minute.
All tests passed.
<Tip Tone="info" Compact="true" Text="Inline note." />
<Tip Tone="warning" Compact="true" Text="Rate limit: 1,000 requests per minute." />
<Tip Tone="success" Compact="true" Text="All tests passed." />Without icon
Minimal variant
<Tip Tone="info" HideIcon="true" Text="Minimal variant." />
<Tip Tone="neutral" HideIcon="true" Title="Title only" />Inside a showcase example
Drop a Tip between the live demo and the code block to document a subtle behavior or edge case.
Button + tip callout
The Button variant catalog uses this pattern for destructive confirmation flows.
Always pair destructive primary buttons with a secondary Cancel. Never put them alone as the only action on a page.
<ShowcaseExample Title="Button + tip callout" Code="@example">
<Button Variant="primary-destructive" Size="md" Text="Delete patient" />
<Tip Tone="warning" Compact="true">
<p>Always pair destructive primary buttons with a secondary
<strong>Cancel</strong>.</p>
</Tip>
</ShowcaseExample>TipsPanel — side card for forms
TipsPanel is a card container for a stack of tips. Drop it into the right column of
.layout-form-with-guide so users can see guidance while they fill out a form.
Patient details
Basic patient information.
<div class="layout-form-with-guide">
<div class="layout-form-content">
<FormSection Title="Patient details" Description="Basic patient information.">
<div class="layout-form-grid">
<InputField Label="First name" Placeholder="Olivia" />
<InputField Label="Last name" Placeholder="Rhye" />
<InputField Label="Date of birth" Type="date" />
<InputField Label="MRN" Placeholder="P-00042" />
</div>
</FormSection>
</div>
<TipsPanel Title="Tips & guidance" Count="4"
Description="Quick notes while filling out this form.">
<Tip Tone="info" Compact="true" Title="MRN format"
Text="Medical Record Numbers must start with 'P-' followed by 5 digits." />
<Tip Tone="warning" Compact="true" Title="Duplicate check"
Text="We'll warn you if a patient with the same name and DOB already exists." />
<Tip Tone="success" Compact="true" Title="Auto-saved"
Text="Draft entries are saved every 30 seconds." />
</TipsPanel>
</div>