import { GlobalAppProcess } from '@uhg-abyss/mobile';<GlobalAppProcess label="Input Label Here" variant={'success'} isVisible={true}/>Label
Use the label prop to set the label of the global app process. Setting a label is required.
Variants
Use the variant property to set the color and icon of the GlobalAppProcess.
The options are success, warning, error, and info. All variants have the default icons shown below. info is the only variant with a built-in icon animation.
Icon
Use the icon property to pass in a specific Icon component. Note that if the icon on the info variant is replaced it will not animate.
Button Text
Use the actionText prop to add a button to the right of the process banner. This will adjust the layout of the banner from centered to stretched.
onActionPress
Use the onActionPress property to handle the action when the button is pressed.
isVisible
Use the isVisible prop to change the visibility of the process banner.
GlobalAppProcess Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| actionText | string | - | Sets the text for the global app process button |
| icon | ReactNode | - | Change the default icon |
| isVisible | boolean | true | Flag to show or hide GlobalAppProcess |
| label | string | - | Sets the label for the global app process |
| onActionPress | function | - | Callback fired when the button is pressed |
| variant | 'info' | 'success' | 'error' | 'warning' | success | Change the global app process style |
GlobalAppProcess Classes
| Class Name | Description |
|---|---|
| abyss-global-app-process-button | GlobalAppProcess button element |
| abyss-global-app-process-icon | GlobalAppProcess icon element |
| abyss-global-app-process-label | GlobalAppProcess label element |
| abyss-global-app-process-root | GlobalAppProcess root element |
| abyss-global-app-process-style-wrapper | GlobalAppProcess style container |
GlobalAppProcess Tokens
| Token Name | Value | |
|---|---|---|
| global-app-process.color.surface.container.success | #007000 | |
| global-app-process.color.surface.container.info | #196ECF | |
| global-app-process.color.surface.container.warning | #C24E14 | |
| global-app-process.color.surface.container.error | #990000 | |
| global-app-process.color.icon.utility | #FFFFFF | |
| global-app-process.color.text.paragraph | #FFFFFF | |
| global-app-process.sizing.all.icon | 20 | |
| global-app-process.spacing.gap.horizontal.container | 4 | |
| global-app-process.spacing.padding.vertical.container | 4 | |
| global-app-process.spacing.padding.horizontal.container | 16 |