Skip to main content

GlobalAppProcess

A type of notification message that communicates system status or background processes.

github
View source code
figma
View design
import { GlobalAppProcess } from '@uhg-abyss/mobile';
    () => {
      return (
        <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​

    Name
    Type
    		DefaultRequiredA11yDescription
    actionText
    string | undefined
    Sets the text for the button
    icon
    string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined
    Change the default icon
    isVisible
    boolean | undefined
    true
    Flag to show or hide process banner
    label
    string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined
    Sets the label for the process banner
    onActionPress
    GestureResponderEventHandler
    Callback fired when the process banner is closed
    variant
    "info" | "success" | "error" | "warning"
    'success'
    Change the process banner style

    GlobalAppProcess Classes​

    Extends Abyss - Link Classes
    Class NameDescription
    abyss-global-app-process-buttonGlobalAppProcess button element
    abyss-global-app-process-iconGlobalAppProcess icon element
    abyss-global-app-process-labelGlobalAppProcess label element
    abyss-global-app-process-rootGlobalAppProcess root element
    abyss-global-app-process-style-wrapperGlobalAppProcess style container

    GlobalAppProcess Tokens​

    Token NameValue
    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
    Table of Contents