BbAlert

ARIA live region politeness. Defaults to 'assertive' for destructive/warning variants, otherwise 'polite'.

Only override it when visual tone and urgency come apart — a quiet outline alert that still has to interrupt. A registered custom variant is polite whatever its name, so urgent instances of one need this set by hand.

Visually hidden string used to label the close button.

Defaults to a localised "Close" from the plugin locale. Worth setting as soon as a page carries more than one dismissible alert, so the two buttons do not read the same to a screen reader.

Defines whether to hide the close button.

The only way to make an alert permanent: an unbound alert is still dismissible, because the internal model starts at true. Replaces v2 show-close, with the polarity inverted.

Name of a registered icon to use, or a full raw <svg> string (e.g. an SVG file imported with ?raw).

No variant implies an icon — pass one, and pick it together with the variant. It reinforces the message; title and text still have to carry it alone.

Size of the icon to use.

Used by v-model, set type to any to avoid Vue casting it as false. Alerts are visible on mount; the model dismisses them.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Accessibility role for the alert container. Defaults to 'alert' for destructive/warning variants, otherwise 'status'.

Derived from the variant, so setting it is a deliberate disagreement with that derivation. Reserve alert for genuinely urgent messages: several assertive alerts appearing together talk over each other.

Text content of the alert body.

For when a string is all you have — a server message, an item in a v-for. When the body is written in the template, the default slot reads better and wins over this prop.

Text content of the alert title.

Transition duration in milliseconds for enter/leave.

Visual variant of the alert.

An open registry, not a closed enum: alertVariants in the plugin config adds typed names, which then ship no CSS of their own. There is no success — use primary, or register one.

Typed any so Vue does not coerce an absent binding to false; treat it as a boolean in your own state. Set it back to true and the alert re-enters with the same transition.

The alert body — the shortest form, and the one to reach for: <BbAlert>Something went wrong</BbAlert>. Same idiom as the rest of the text-prop family (BbButton, BbBaseButton, BbTooltip, BbIndicator). When more than one source is present the most specific wins: #text > children > the text prop.

Replaces the default alert body text. Wins over children and text.

Receives { text }, the value of the text prop, so it can decorate the string instead of restating it. Precedence for the body, most specific first: #text, child content, the text prop.

Replaces the default alert title text.