Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Alert

An alert is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.

usage: import { Alert, Heading, Content, useAlertTriggerContext } from "@sharegate/orbit-ui";
wai-aria: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog
sources: Github

Guidelines

When to use

To display a confirmation message, an error, or a warning.

Accessibility

Announcement

aria-label and aria-describedby defaults to the alert <Heading> and <Content> values.
You can overwrite them by setting aria-label and aria-describedby props on the alert.

Focus

If the alert calls for an action, make sure to set the focus correctly to avoid any unwanted action.
You can use the autoFocusButton prop on the alert to specify which control should have the initial focus.
If your alert is destructive, you can offer a secondary button Cancel and set the focus to the secondary button with autoFocusButton="secondary".

Usage

Default

An alert must have an heading, some content and a primary button label.

Editable example

<AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert primaryButtonLabel="Yes">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger><AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert primaryButtonLabel="Yes">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger>

Secondary button

An alert can have a secondary button.

Editable example

<AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert primaryButtonLabel="Yes" secondaryButtonLabel="Postpone">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger><AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert primaryButtonLabel="Yes" secondaryButtonLabel="Postpone">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger>

Cancel button

An alert can have a cancel button.

Editable example

<AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert primaryButtonLabel="Yes" cancelButtonLabel="No">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger><AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert primaryButtonLabel="Yes" cancelButtonLabel="No">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger>

Disabled buttons

An alert primary and secondary buttons can be disabled.

Editable example

<AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert primaryButtonLabel="Yes" primaryButtonDisabled secondaryButtonLabel="Postpone">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger><AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert primaryButtonLabel="Yes" primaryButtonDisabled secondaryButtonLabel="Postpone">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger>

Confirmation

Use a confirmation alert when a non destructive action is required from a user.

Editable example

<AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert variant="confirmation" primaryButtonLabel="Yes" cancelButtonLabel="No">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger><AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert variant="confirmation" primaryButtonLabel="Yes" cancelButtonLabel="No">
        <Heading>Autopilot</Heading>
        <Content>Are you sure you want to engage autopilot?</Content>
    </Alert>
</AlertTrigger>

Destructive

Use a destructive alert to confirm a permanent change, like deleting data.

Editable example

<AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert variant="destructive" primaryButtonLabel="Yes" cancelButtonLabel="No">
        <Heading>Eject</Heading>
        <Content>Are you sure you want to eject into the void?</Content>
    </Alert>
</AlertTrigger><AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert variant="destructive" primaryButtonLabel="Yes" cancelButtonLabel="No">
        <Heading>Eject</Heading>
        <Content>Are you sure you want to eject into the void?</Content>
    </Alert>
</AlertTrigger>

Warning

Use a warning alert to inform of a significant change.

Editable example

<AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert variant="warning" primaryButtonLabel="Ok" secondaryButtonLabel="Diagnose">
        <Heading>Low carburant</Heading>
        <Content>The space shuttle will be out of carburant in an hour.</Content>
    </Alert>
</AlertTrigger><AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert variant="warning" primaryButtonLabel="Ok" secondaryButtonLabel="Diagnose">
        <Heading>Low carburant</Heading>
        <Content>The space shuttle will be out of carburant in an hour.</Content>
    </Alert>
</AlertTrigger>

Negative

Use a negative alert to inform that something went wrong, like a server error.

Editable example

<AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert variant="negative" primaryButtonLabel="Retry" cancelButtonLabel="Cancel">
        <Heading>Network error</Heading>
        <Content>
            Something went wrong while connecting to NASA network. Please try again in a few
            minutes.
        </Content>
    </Alert>
</AlertTrigger><AlertTrigger>
    <Button variant="secondary">Open</Button>
    <Alert variant="negative" primaryButtonLabel="Retry" cancelButtonLabel="Cancel">
        <Heading>Network error</Heading>
        <Content>
            Something went wrong while connecting to NASA network. Please try again in a few
            minutes.
        </Content>
    </Alert>
</AlertTrigger>

Controlled

The open state can be handled in controlled mode.

Editable example

() => {
    const [isOpen, setIsOpen] = useState(false);

    const handleOpenChange = useCallback(
        (event, newValue) => {
            setIsOpen(newValue);
            console.log(newValue);
        },
        [setIsOpen]
    );

    const handleClose = useCallback(() => {
        setIsOpen(false);
    }, [setIsOpen]);

    return (
        <AlertTrigger open={isOpen} onOpenChange={handleOpenChange}>
            <Button variant="secondary">Open</Button>
            <Alert
                primaryButtonLabel="Yes"
                secondaryButtonLabel="Postpone"
                cancelButtonLabel="No"
                onPrimaryButtonClick={handleClose}
                onSecondaryButtonClick={handleClose}
                onCancelButtonClick={handleClose}
            >
                <Heading>Autopilot</Heading>
                <Content>Are you sure you want to engage autopilot?</Content>
            </Alert>
        </AlertTrigger>
    );
};() => {
    const [isOpen, setIsOpen] = useState(false);

    const handleOpenChange = useCallback(
        (event, newValue) => {
            setIsOpen(newValue);
            console.log(newValue);
        },
        [setIsOpen]
    );

    const handleClose = useCallback(() => {
        setIsOpen(false);
    }, [setIsOpen]);

    return (
        <AlertTrigger open={isOpen} onOpenChange={handleOpenChange}>
            <Button variant="secondary">Open</Button>
            <Alert
                primaryButtonLabel="Yes"
                secondaryButtonLabel="Postpone"
                cancelButtonLabel="No"
                onPrimaryButtonClick={handleClose}
                onSecondaryButtonClick={handleClose}
                onCancelButtonClick={handleClose}
            >
                <Heading>Autopilot</Heading>
                <Content>Are you sure you want to engage autopilot?</Content>
            </Alert>
        </AlertTrigger>
    );
};

API

Alert

usage: import { Alert } from "@sharegate/orbit-ui";
slots: "heading", "content"
extends: Section
StyleProps

Name Description Default

autoFocusButton

The button to focus by default when the alert open.

"primary""secondary""cancel"

cancelButtonLabel

The cancel button label.

string

onCancelButtonClick

Called when the cancel button is clicked.

(event: MouseEvent<Element, MouseEvent>) => void

event React's original event.

onClose

Called when a closing event happenened.

(event: SyntheticEvent<Element, Event>) => void

event React's original synthetic event.

onPrimaryButtonClick

Called when the primary button is clicked.

(event: MouseEvent<Element, MouseEvent>) => void

event React's original event.

onSecondaryButtonClick

Called when the secondary button is clicked.

(event: MouseEvent<Element, MouseEvent>) => void

event React's original event.

primaryButtonDisabled

Whether or not the primary button is disabled.

falsetrue

primaryButtonLabel*

The primary button label.

string

secondaryButtonDisabled

Whether or not the secondary button is disabled.

falsetrue

secondaryButtonLabel

The secondary button label.

string

variant

The style to use.

"warning""negative""confirmation""destructive"

"confirmation"

wrapperProps

Additional props to render on the wrapper element.

Partial<OmitInternalProps<InnerBoxProps, never> & RefAttributes<any>>

zIndex

The z-index of the dialog.

number

Heading

usage: import { Heading } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
size	An heading can vary in size. "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xs" \| ResponsiveValue<"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xs">	-
slot	Slot to render into. string	-

Content

usage: import { Content } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
slot	Slot to render into. string	-

No Preview

Alert

Guidelines

When to use

Accessibility

Announcement

Focus

Usage

Default

Secondary button

Cancel button

Disabled buttons

Confirmation

Destructive

Warning

Negative

Controlled

API

Alert

Heading

Content