FLIN App

All Variants

Four semantic types with title and message text.

Message Only

Compact toasts without a title for quick notifications.

Custom Content

Use children for richer content inside the toast body.

Build #482 deployed to production.

Context Examples

Real-world notification scenarios for common app actions.

Usage

<Toast type="success" title="Saved" message="Changes saved." /><Toast type="error" title="Error" message="Upload failed." /><Toast type="info" message="Copied to clipboard." /><Toast type="success" title="Deployed">Build #482 to prod.</Toast>

Props

Prop	Type	Default	Description
`type`	text	"info"	Variant: success, error, warning, info
`title`	text	""	Bold heading text
`message`	text	""	Description text
`children`	content	-	Custom body content

Toast

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } All Variants

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Message Only

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Custom Content

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Context Examples