Components
Alert
Commonly used for status messages such as success confirmations, warnings, errors, or general notices.
Due to embedding constraints, visual details may not be fully accurate. For pixel-accurate rendering, refer to the Widgetbook.
Usage
FluttyAlert(
title: "Success",
description: "Your changes have been saved successfully.",
color: ColorVariant.success,
isClosable: true,
onClose: () {},
)Colors
Use the color property to express the semantic intent of the alert.
FluttyAlert(title: "Neutral", color: ColorVariant.neutral),
FluttyAlert(title: "Primary", color: ColorVariant.primary),
FluttyAlert(title: "Secondary", color: ColorVariant.secondary),
FluttyAlert(title: "Success", color: ColorVariant.success),
FluttyAlert(title: "Warning", color: ColorVariant.warning),
FluttyAlert(title: "Danger", color: ColorVariant.danger),Variants
Solid
FluttyAlert(
title: "Solid Alert",
variant: FluttyAlertVariant.solid,
)Bordered
FluttyAlert(
title: "Bordered Alert",
variant: FluttyAlertVariant.bordered,
)Radius
FluttyAlert(title: "None", radius: RadiusVariant.none),
FluttyAlert(title: "Small", radius: RadiusVariant.sm),
FluttyAlert(title: "Medium", radius: RadiusVariant.md),
FluttyAlert(title: "Large", radius: RadiusVariant.lg),
FluttyAlert(title: "Full", radius: RadiusVariant.full),Icons
Custom Icon
FluttyAlert(
title: "Custom Icon",
icon: HeroIcons.moon.outline,
)Hide Icon
FluttyAlert(
title: "No Icon",
hideIcon: true,
)Hide Icon Wrapper
FluttyAlert(
title: "No Icon Wrapper",
hideIconWrapper: true,
)Actions
FluttyAlert(
title: "Alert with Actions",
description: "Choose how you want to proceed.",
endContent: [
FluttyButton(
size: FluttyButtonSize.sm,
text: "Action 1",
onPress: () {},
),
FluttyButton(
size: FluttyButtonSize.sm,
color: ColorVariant.neutral,
text: "Action 2",
onPress: () {},
),
],
)Dismissable
FluttyAlert(
title: "Dismissable Alert",
isClosable: true,
onClose: () {},
)Visibility
FluttyAlert(
title: "Conditionally Visible",
isVisible: true,
onVisibleChange: () {},
)API
Prop
Type
Events
Prop
Type