Alert

The <pines-alert> component displays contextual feedback messages inline within a page layout. Use it to surface validation errors, success confirmations, informational notices, or cautionary warnings after user actions or during page load. Pair it with a color and style that matches the severity of the message.

Properties

Attribute Type Description
type PinesAlertTypeEnum Controls the visual weight of the alert. Choose a style that reflects how prominently the message should register.
color PinesAlertColorEnum Sets the color scheme of the alert. Choose the color that communicates the nature of the message — informational, success, warning, or danger.
class string Additional CSS classes applied to the alert container. Use for layout adjustments such as margin or width constraints.
header string Optional bold heading displayed above the body text. Use to provide a concise label for the alert, such as "Success" or "Action Required", before elaborating in the child content.

PinesAlertTypeEnum Values

Value Description
Primary Solid filled background. Best for prominent, high-priority messages the user must not miss — such as session expiry warnings or critical errors that block proceeding.
Secondary Lighter filled background. Suitable for secondary notices or supplementary information that is relevant but not urgent.
Neutral Minimal, low-contrast style. Ideal for passive informational messages that provide context without drawing strong attention.

PinesAlertColorEnum Values

Value Description
Blue Informational color. Use for neutral messages, tips, or status updates that do not require immediate action.
Red Danger color. Use for errors, validation failures, or warnings about irreversible or destructive actions where the user needs to stop and take notice.
Green Success color. Use to confirm that an operation completed successfully — such as a form submission, a save action, or a payment going through.
Yellow Warning color. Use for cautionary messages that don't indicate failure but where the user should be aware before proceeding.