Banner
A lightweight component to alert users of important information or actions
Preview
A <FrigadeBanner/> component
Code
config.yml props
The following props are available in config.yml
in the steps
array:
React component props
- appearance
- className
- customVariables
- flowId
- hideOnFlowCompletion
- icon
- onButtonClick
- onClick
- onComplete
- onDismiss
- onStepCompletion
- style
- subtitle
- title
- type
appearance
Optional
appearance: Appearance
The appearance of the flow. See https://docs.frigade.com/sdk/styling
className
Optional
className: string
customVariables
Optional
customVariables: Object
Dynamic variables to use in config.yml. See https://docs.frigade.com/flows/dynamic-variables
Index signature
▪ [key: string
]: string
| number
| boolean
flowId
flowId: string
hideOnFlowCompletion
Optional
hideOnFlowCompletion: boolean
icon
Optional
icon: ReactNode
Icon to use in the banner
onButtonClick
Optional
onButtonClick: (step
: StepData
, index?
: number
, cta?
: "primary"
| "secondary"
| "link"
| "back"
| "collapse"
| "expand"
, nextStep?
: StepData
) => boolean
Handler for when a primary or secondary CTA is clicked (regardless if step is completed or not). Return true if your app performs an action (e.g. open other modal or page transition).
Parameters
Name | Type |
---|---|
step | StepData |
index? | number |
cta? | "primary" | "secondary" | "link" | "back" | "collapse" | "expand" |
nextStep? | StepData |
Returns
boolean
onClick
Optional
onClick: () => void
Handler for when the banner container is clicked
Returns
void
onComplete
Optional
onComplete: () => void
Returns
void
onDismiss
Optional
onDismiss: () => void
Returns
void
onStepCompletion
Optional
onStepCompletion: (step
: StepData
, index
: number
, nextStep?
: StepData
, allFormData?
: any
, stepSpecificFormData?
: any
) => boolean
Handler for when a step is completed.
Parameters
Name | Type | Description |
---|---|---|
step | StepData | |
index | number | |
nextStep? | StepData | |
allFormData? | any | All form data collected so far (only applicable to FrigadeForms) |
stepSpecificFormData? | any | Form data collected for the finished step (only applicable to FrigadeForms) |
Returns
boolean
style
Optional
style: CSSProperties
subtitle
Optional
subtitle: string
title
Optional
title: string
type
Optional
type: FrigadeBannerType
full-width: Full width banner, useful in top of the page.
square: Square sized banner, useful in sidebars