Components
Button
Triggers an action or event, such as submitting a form, opening a dialog, or performing a command.
Due to embedding constraints, visual details may not be fully accurate. For pixel-accurate rendering, refer to the Widgetbook.
Usage
FluttyButton(
text: "Button",
onPress: () {},
)Variants
Solid
FluttyButton(
text: "Solid",
variant: FluttyButtonStyle.solid,
onPress: () {},
)Bordered
FluttyButton(
text: "Bordered",
variant: FluttyButtonStyle.bordered,
onPress: () {},
)Flat
FluttyButton(
text: "Flat",
variant: FluttyButtonStyle.flat,
onPress: () {},
)Ghost
FluttyButton(
text: "Ghost",
variant: FluttyButtonStyle.ghost,
onPress: () {},
)Shadow
FluttyButton(
text: "Shadow",
variant: FluttyButtonStyle.shadow,
onPress: () {},
)Sizes
FluttyButton(text: "Small", size: FluttyButtonSize.sm, onPress: () {}),
FluttyButton(text: "Medium", size: FluttyButtonSize.md, onPress: () {}),
FluttyButton(text: "Large", size: FluttyButtonSize.lg, onPress: () {}),Radius
FluttyButton(text: "None", radius: RadiusVariant.none, onPress: () {}),
FluttyButton(text: "Small", radius: RadiusVariant.sm, onPress: () {}),
FluttyButton(text: "Medium", radius: RadiusVariant.md, onPress: () {}),
FluttyButton(text: "Large", radius: RadiusVariant.lg, onPress: () {}),
FluttyButton(text: "Full", radius: RadiusVariant.full, onPress: () {}),Colors
FluttyButton(text: "Neutral", color: ColorVariant.neutral, onPress: () {}),
FluttyButton(text: "Primary", color: ColorVariant.primary, onPress: () {}),
FluttyButton(text: "Secondary", color: ColorVariant.secondary, onPress: () {}),
FluttyButton(text: "Success", color: ColorVariant.success, onPress: () {}),
FluttyButton(text: "Warning", color: ColorVariant.warning, onPress: () {}),
FluttyButton(text: "Danger", color: ColorVariant.danger, onPress: () {}),Icons
With Icons
FluttyButton(
text: "Button",
startContent: Icon(HeroIcons.bookOpen.outline),
onPress: () {},
),
FluttyButton(
text: "Button",
endContent: Icon(HeroIcons.arrowRightCircle.outline),
onPress: () {},
),Icon Only
FluttyButton(
isIconOnly: true,
startContent: Icon(HeroIcons.bellSnooze.solid),
onPress: () {},
)Loading
FluttyButton(
text: "Loading",
isLoading: true,
onPress: () {},
)Full Width
FluttyButton(
fullWidth: true,
text: "Button",
onPress: () {},
)API
Prop
Type
Events
Prop
Type