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

Message

A message is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

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

Guidelines

When to use

To provide feedback such as success, warning, error etc.
To confirm an action.
To incite the user to take an action, if this action does not require to interrupt the user flow.

Content

Be short. Limit your content to one sentence when possible.
Provide a path of action. Don't let the user wonder what's next.
Use copy that is easily scannable.
Link to the appropriate documentation when additional context is needed.

Accessibility

Text should be descriptive and complete enough to be understood without relying on the icon. Using an icon to carry information will make it non-accessible.

Message vs Alert

If the user flow has to be interrupted, use an alert.

Usage

Default

A default message.

We offer the safest space travel of the industry!

Editable example

<Message>We offer the safest space travel of the industry!</Message><Message>We offer the safest space travel of the industry!</Message>

Rich content

A message can also accept rich content.

Travel with us!

We offer the safest space travel of the industry. Consult our safety policy here.

Editable example

<Message>
    <Content>
        <Heading>Travel with us!</Heading>
        We offer the safest space travel of the industry. Consult our safety policy{" "}
        <TextLink href="#">here</TextLink>.
    </Content>
</Message><Message>
    <Content>
        <Heading>Travel with us!</Heading>
        We offer the safest space travel of the industry. Consult our safety policy{" "}
        <TextLink href="#">here</TextLink>.
    </Content>
</Message>

Action

A message can accept an action button.

We offer the safest space travel of the industry!

Editable example

<Message>
    <Content>We offer the safest space travel of the industry!</Content>
    <Button>Book now</Button>
</Message><Message>
    <Content>We offer the safest space travel of the industry!</Content>
    <Button>Book now</Button>
</Message>

Dismissable

A message can be dismissable by specifying an onDismiss handler.

We offer the safest space travel of the industry!

Editable example

<Message onDismiss={() => {}}>We offer the safest space travel of the industry!</Message><Message onDismiss={() => {}}>We offer the safest space travel of the industry!</Message>

Informative

Use an informative message to notify a user of a change that's relevant for them to achieve their current goal.

We offer the safest space travel of the industry!

Editable example

<Message variant="informative" onDismiss={() => {}}>
    <Content>We offer the safest space travel of the industry!</Content>
    <Button>Book now</Button>
</Message><Message variant="informative" onDismiss={() => {}}>
    <Content>We offer the safest space travel of the industry!</Content>
    <Button>Book now</Button>
</Message>

Warning

Use the warning variant message to help a user avoid an issue.

We are having trouble contacting the email server.

Editable example

<Message variant="warning" onDismiss={() => {}}>
    <Content>We are having trouble contacting the email server.</Content>
    <Button>Retry</Button>
</Message><Message variant="warning" onDismiss={() => {}}>
    <Content>We are having trouble contacting the email server.</Content>
    <Button>Retry</Button>
</Message>

Positive

Use the positive variant to inform a user that an action has completed successfuly.

Your email to booking@spacetravel.com has been sent!

Editable example

<Message variant="positive" onDismiss={() => {}}>
    <Content>
        Your email to <strong>booking@spacetravel.com</strong> has been sent!
    </Content>
    <Button>Undo</Button>
</Message><Message variant="positive" onDismiss={() => {}}>
    <Content>
        Your email to <strong>booking@spacetravel.com</strong> has been sent!
    </Content>
    <Button>Undo</Button>
</Message>

Negative

Use the negative variant to help a user understand a critical issue at the system level.

Cannot contact email server.

Editable example

<Message variant="negative" onDismiss={() => {}}>
    <Content>Cannot contact email server.</Content>
    <Button>Retry</Button>
</Message><Message variant="negative" onDismiss={() => {}}>
    <Content>Cannot contact email server.</Content>
    <Button>Retry</Button>
</Message>

Controlled

A message can handle show state in controlled mode.

We offer the safest space travel of the industry!

Editable example

() => {
    const [show, setShow] = useState(true);

    const toggleVisibility = useCallback(() => {
        setShow(x => !x);
        console.log(!show);
    }, [show, setShow]);

    return (
        <Stack minHeight="110px">
            <Button variant="secondary" onClick={toggleVisibility}>
                {show ? "Hide" : "Show"}
            </Button>
            <Message show={show} onDismiss={toggleVisibility}>
                <Content>We offer the safest space travel of the industry!</Content>
                <Button>Book now</Button>
            </Message>
        </Stack>
    );
};() => {
    const [show, setShow] = useState(true);

    const toggleVisibility = useCallback(() => {
        setShow(x => !x);
        console.log(!show);
    }, [show, setShow]);

    return (
        <Stack minHeight="110px">
            <Button variant="secondary" onClick={toggleVisibility}>
                {show ? "Hide" : "Show"}
            </Button>
            <Message show={show} onDismiss={toggleVisibility}>
                <Content>We offer the safest space travel of the industry!</Content>
                <Button>Book now</Button>
            </Message>
        </Stack>
    );
};

Props

Message

usage: import { Message } from "@sharegate/orbit-ui";
slots: "content", "button"
extends: Div
StyleProps

Name Description Default

children*

React children.

onDismiss

Called when the dismiss button is clicked.

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

event React's original synthetic event.

show

A controlled show value.

falsetrue

true

variant

The style to use.

"informative""warning""positive""negative"

"informative"

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

Message

Guidelines

When to use

Content

Accessibility

Message vs Alert

Usage

Default

Rich content

Action

Dismissable

Informative

Warning

Positive

Negative

Controlled

Props

Message

Content