Copy page

Components

FormLabelWithPriorityHelp

src/lib/components/forms/FormLabelWithPriorityHelp.svelte

Purpose

Like FormLabelWithHelp, but the tooltip can be styled by priority (info/warning/error) using PriorityTooltipContent. Use it when a field's help text carries a severity — for example, a warning that a setting is irreversible, or an info note about a recommended value.

Origin

Custom — Primebrick-written. Wraps the shadcn-svelte™ Tooltip primitive, PriorityTooltipContent, and the Lucide™ HelpCircle icon.

Usage

Default (no priority)

Without a priority, it behaves like FormLabelWithHelp — a plain tooltip.

Code
<label class="flex items-center gap-1">
  {$t('users.fields.username')}
  <FormLabelWithPriorityHelp text={$t('users.fields.usernameHelp')} />
</label>

With priority and title

Pass priority to render a styled tooltip with an optional title header.

Code
<label class="flex items-center gap-1">
  {$t('settings.fields.deleteMode')}
  <FormLabelWithPriorityHelp
    text={$t('settings.fields.deleteModeWarning')}
    priority="warning"
    title={$t('settings.fields.deleteModeTitle')}
  />
</label>

Info priority

Code
<label class="flex items-center gap-1">
  {$t('settings.fields.syncInterval')}
  <FormLabelWithPriorityHelp
    text={$t('settings.fields.syncIntervalHelp')}
    priority="info"
  />
</label>

Props

Full prop table: see API reference — formlabelwithpriorityhelp.

Key props: text: string (tooltip body), priority?: TooltipPriority ('info' | 'warning' | 'error', optional — when omitted a plain tooltip is shown), title?: string (optional header shown inside the priority tooltip).

Next steps

• Component catalog
• UI stack
• API reference