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​

    NameTypeDefaultRequiredDescription
    actionText
    string | undefined
    		--
    Sets the text for the button
    icon
    React.ReactNode | undefined
    		--
    Change the default icon
    isVisible
    boolean | undefined
    true
    		-
    Flag to show or hide process banner
    label
    React.ReactNode
    		-
    Sets the label for the process banner
    onActionPress
    Abyss.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-rootGlobalAppProcess root element
    abyss-global-app-process-style-wrapperGlobalAppProcess style container
    abyss-global-app-process-labelGlobalAppProcess label element
    abyss-global-app-process-buttonGlobalAppProcess button element
    abyss-global-app-process-iconGlobalAppProcess icon element

    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