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

Tile

A tile groups information into an interactive element to let users browse and take action on a group of related items.

usage: import { Tile, TileLink, TileGroup, Heading, Content } from "@sharegate/orbit-ui";
sources: Github

Guidelines

When to use

To let the user make a choice while giving more context than with a radio group or a checkbox.
To let the user navigate to another page while giving more context than with a link.

Content

Have an heading and a content.

Usage

Tiles behaves like a radio button or a checkbox depending if it's used in a single or multiple selection context.

Basic

A tile consists of minimally an heading and some content.

Editable example

<Tile>
    <Heading>Buy a ticket</Heading>
    <Content>Purchase a ticket for any of our space travel adventure.</Content>
</Tile><Tile>
    <Heading>Buy a ticket</Heading>
    <Content>Purchase a ticket for any of our space travel adventure.</Content>
</Tile>

Image

A tile can have an image.

Editable example

<Tile>
    <Image src={SpacePortraitHorizontal} alt="Planet over another planet" />
    <Heading>Buy a ticket</Heading>
    <Content>
        Tickets are not refundable and not transferable. A confirmation email will be sent within
        the next few minutes.
    </Content>
</Tile><Tile>
    <Image src={SpacePortraitHorizontal} alt="Planet over another planet" />
    <Heading>Buy a ticket</Heading>
    <Content>
        Tickets are not refundable and not transferable. A confirmation email will be sent within
        the next few minutes.
    </Content>
</Tile>

Or an illustration with a background color.

Editable example

<Tile>
    <Illustration backgroundColor="alias-accent-light">
        <Image src={Planet} width="100px" alt="Planet" />
    </Illustration>
    <Heading>Buy a ticket</Heading>
    <Content>
        Tickets are not refundable and not transferable. A confirmation email will be sent within
        the next few minutes
    </Content>
</Tile><Tile>
    <Illustration backgroundColor="alias-accent-light">
        <Image src={Planet} width="100px" alt="Planet" />
    </Illustration>
    <Heading>Buy a ticket</Heading>
    <Content>
        Tickets are not refundable and not transferable. A confirmation email will be sent within
        the next few minutes
    </Content>
</Tile>

Checked

A tile can be checked.

Editable example

<Tile defaultChecked>
    <Heading>Buy a ticket</Heading>
    <Content>Purchase a ticket for any of our space travel adventure.</Content>
</Tile><Tile defaultChecked>
    <Heading>Buy a ticket</Heading>
    <Content>Purchase a ticket for any of our space travel adventure.</Content>
</Tile>

Disabled

A tile can be disabled.

Editable example

<Tile disabled>
    <Heading>Buy a ticket</Heading>
    <Content>Purchase a ticket for any of our space travel adventure.</Content>
</Tile><Tile disabled>
    <Heading>Buy a ticket</Heading>
    <Content>Purchase a ticket for any of our space travel adventure.</Content>
</Tile>

Orientation

A tile can render horizontally.

Editable example

<Inline
    wrap={{
        base: true,
        md: false
    }}
>
    <Tile orientation="horizontal">
        <Image src={SpacePortrait} alt="Space Portrait" />
        <Heading>Buy a ticket</Heading>
        <Content>
            Tickets are not refundable and not transferable. A confirmation email will be sent
            within the next few minutes.
        </Content>
    </Tile>
    <Tile orientation="horizontal">
        <Illustration>
            <Image src={Planet} width="100px" alt="Planet" />
        </Illustration>
        <Heading>Buy a ticket</Heading>
        <Content>
            Tickets are not refundable and not transferable. A confirmation email will be sent
            within the next few minutes.
        </Content>
    </Tile>
</Inline><Inline
    wrap={{
        base: true,
        md: false
    }}
>
    <Tile orientation="horizontal">
        <Image src={SpacePortrait} alt="Space Portrait" />
        <Heading>Buy a ticket</Heading>
        <Content>
            Tickets are not refundable and not transferable. A confirmation email will be sent
            within the next few minutes.
        </Content>
    </Tile>
    <Tile orientation="horizontal">
        <Illustration>
            <Image src={Planet} width="100px" alt="Planet" />
        </Illustration>
        <Heading>Buy a ticket</Heading>
        <Content>
            Tickets are not refundable and not transferable. A confirmation email will be sent
            within the next few minutes.
        </Content>
    </Tile>
</Inline>

Controlled

A tite can handle checked state in controlled mode.

Editable example

() => {
    const [isChecked, setIsChecked] = useState(false);

    const handleChange = useCallback(() => {
        setIsChecked(x => !x);
        console.log(!isChecked);
    }, [isChecked, setIsChecked]);

    return (
        <Tile checked={isChecked} onChange={handleChange}>
            <Heading>Buy a ticket</Heading>
            <Content>Purchase a ticket for any of our space travel adventure.</Content>
        </Tile>
    );
};() => {
    const [isChecked, setIsChecked] = useState(false);

    const handleChange = useCallback(() => {
        setIsChecked(x => !x);
        console.log(!isChecked);
    }, [isChecked, setIsChecked]);

    return (
        <Tile checked={isChecked} onChange={handleChange}>
            <Heading>Buy a ticket</Heading>
            <Content>Purchase a ticket for any of our space travel adventure.</Content>
        </Tile>
    );
};

TileLink

A tile can also be navigable. It is similar to a link and it does share the same props.

Buy a ticketPurchase a ticket for any of our space travel adventure.

Editable example

<TileLink href="https://www.virgingalactic.com">
    <Heading>Buy a ticket</Heading>
    <Content>Purchase a ticket for any of our space travel adventure.</Content>
</TileLink><TileLink href="https://www.virgingalactic.com">
    <Heading>Buy a ticket</Heading>
    <Content>Purchase a ticket for any of our space travel adventure.</Content>
</TileLink>

React router

To integrate with a third-party routing library like React Router any link component can be rendered as a React Router Link or as any other custom component.

import { Link } from "react-router-dom";

const RouterTileLink = as(TileLink, Link);

() => {
    return (
        <RouterTileLink to="/buy">
            <Heading>Buy a ticket</Heading>
            <Content>Purchase a ticket for any of our space travel adventure.</Content>
        </RouterTileLink>
    );
};

TileGroup

Related tiles can be grouped together. By default a tile group doesn't allow any selection. This is usually what you want if you need to group together navigable tiles.

Buy a ticketPurchase a ticket for any of our space travel adventure.

Refund a ticketGet a refund for any space travel adventure ticket.

Manage AccountUpdate your address or any other information related to your account.

Editable example

<TileGroup>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </TileLink>
</TileGroup><TileGroup>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </TileLink>
</TileGroup>

Single selection

A tile group can allow a single selection. This is a behavior similar to a radio group.

Editable example

<TileGroup selectionMode="single">
    <Tile value="buy">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </Tile>
    <Tile value="refund">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </Tile>
    <Tile value="manage-account">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </Tile>
</TileGroup><TileGroup selectionMode="single">
    <Tile value="buy">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </Tile>
    <Tile value="refund">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </Tile>
    <Tile value="manage-account">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </Tile>
</TileGroup>

Multiple selection

A tile group can allow a multiple selection. This is a behavior similar to a checkbox group.

Editable example

<TileGroup selectionMode="multiple">
    <Tile value="buy">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </Tile>
    <Tile value="refund">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </Tile>
    <Tile value="manage-account">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </Tile>
</TileGroup><TileGroup selectionMode="multiple">
    <Tile value="buy">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </Tile>
    <Tile value="refund">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </Tile>
    <Tile value="manage-account">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </Tile>
</TileGroup>

Row size

A tile group can have multiple tiles on the same row.

Buy a ticketPurchase a ticket for any of our space travel adventure.

Refund a ticketGet a refund for any space travel adventure ticket.

Manage AccountUpdate your address or any other information related to your account.

Editable example

<TileGroup
    rowSize={{
        base: "1",
        md: "2",
        lg: "3"
    }}
>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </TileLink>
</TileGroup><TileGroup
    rowSize={{
        base: "1",
        md: "2",
        lg: "3"
    }}
>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </TileLink>
</TileGroup>

Wrap

A tile group tiles will wrap on multiple lines automatically.

Buy a ticketPurchase a ticket for any of our space travel adventure.

Refund a ticketGet a refund for any space travel adventure ticket.

Manage AccountUpdate your address or any other information related to your account.

Editable example

<TileGroup rowSize={2}>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </TileLink>
</TileGroup><TileGroup rowSize={2}>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Buy a ticket</Heading>
        <Content>Purchase a ticket for any of our space travel adventure.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Refund a ticket</Heading>
        <Content>Get a refund for any space travel adventure ticket.</Content>
    </TileLink>
    <TileLink href="https://www.virgingalactic.com">
        <Heading>Manage Account</Heading>
        <Content>Update your address or any other information related to your account.</Content>
    </TileLink>
</TileGroup>

Controlled

A tile group with selection can handle value state in controlled mode.

Editable example

() => {
    const [value, setValue] = useState([]);

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

    return (
        <TileGroup
            value={value}
            selectionMode="multiple"
            onChange={handleChange}
            rowSize={{
                base: "1",
                md: "2",
                lg: "3"
            }}
        >
            <Tile value="buy">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </Tile>
            <Tile value="refund">
                <Heading>Refund a ticket</Heading>
                <Content>Get a refund for any space travel adventure ticket.</Content>
            </Tile>
            <Tile value="manage-account">
                <Heading>Manage Account</Heading>
                <Content>
                    Update your address or any other information related to your account.
                </Content>
            </Tile>
        </TileGroup>
    );
};() => {
    const [value, setValue] = useState([]);

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

    return (
        <TileGroup
            value={value}
            selectionMode="multiple"
            onChange={handleChange}
            rowSize={{
                base: "1",
                md: "2",
                lg: "3"
            }}
        >
            <Tile value="buy">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </Tile>
            <Tile value="refund">
                <Heading>Refund a ticket</Heading>
                <Content>Get a refund for any space travel adventure ticket.</Content>
            </Tile>
            <Tile value="manage-account">
                <Heading>Manage Account</Heading>
                <Content>
                    Update your address or any other information related to your account.
                </Content>
            </Tile>
        </TileGroup>
    );
};

API

Tile

usage: import { Tile } from "@sharegate/orbit-ui";
slots: "image", "illustration", "heading", "content"
extends: Button
StyleProps

Name Description Default

autoFocus

Whether or not the tile should autoFocus on render.

numberfalsetrue

checked

A controlled checked value.

falsetrue

children*

React children.

defaultChecked

The initial value of checked when uncontrolled.

falsetrue

onChange

Called when the tile checked state change.

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

`event`	React's original event.
`isChecked`	Whether the tile is checked or not.

orientation

The orientation of the tile.

"horizontal" | "vertical" | ResponsiveValue<TileOrientation>

value

The value to associate with when in a group.

string

TileLink

usage: import { TileLink } from "@sharegate/orbit-ui";
slots: "image", "illustration", "heading", "content"
extends: A
StyleProps

Name	Description	Default
autoFocus	Whether or not the link should autoFocus on render. numberfalsetrue	-
disabled	Whether or not the link is disabled. falsetrue	-
external	Whether or not this is an external link. falsetrue	-
href	See MDN. string	-
orientation	The orientation of the tile. "horizontal" \| "vertical" \| ResponsiveValue<TileOrientation>	vertical
rel	See MDN. string	-
slot	Slot to render into. string	-
target	See MDN. string	-

TileGroup

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

Name Description Default

align

The alignment of the elements.

"center" | "end" | "start" | ResponsiveValue<FlexAlignment>

autoFocus

Whether or not the first tile of the group should autoFocus on render.

numberfalsetrue

children*

React children.

defaultValue

The initial value of value.

string[]

disabled

Whether or not the tiles are disabled.

falsetrue

inline

Whether or not the element generate line breaks before or after himself.

falsetrue

onChange

Called when any of the children is checked or unchecked..

(event: SyntheticEvent<Element, Event>, value: string[]) => void

`event`	React's original event.
`value`	The new value.

reverse

Whether or not to reverse the order of the elements.

falsetrue

rowSize

The number of tiles per row.

number | ResponsiveValue<number>

selectionMode

The type of selection that is allowed.

"none""multiple""single"

"none"

value

The value of the tile group.

string[]

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

Tile

Guidelines

When to use

Content

Usage

Basic

Image

Checked

Disabled

Orientation

Controlled

TileLink

React router

TileGroup

Single selection

Multiple selection

Row size

Wrap

Controlled

API

Tile

TileLink

TileGroup

Heading

Content