v7

Orbit Migration Guide v7

Breaking changes

Toast

createPromiseToast(promise, {
icon: <Notification />,
loading: "...Loading",
success: "Got the data",
error: "Error when fetching",
});
// This will display the icon Notification on the success toast
createPromiseToast(
promise,
{
loading: "...Loading",
success: "Got the data",
error: "Error when fetching",
},
{
success: {
icon: <Notification />,
},
},
);
// This will display the icon Notification on all toasts
createPromiseToast(
promise,
{
loading: "...Loading",
success: "Got the data",
error: "Error when fetching",
},
{
icon: <Notification />,
},
);

BadgePrimitive

Badge

<Badge type="neutral">neutral (default)</Badge>
<Badge type="infoInverted">infoInverted</Badge>
<Badge type="info">info</Badge>
<Badge type="successInverted">success</Badge>
<Badge type="success">success</Badge>
<Badge type="warningInverted">warning</Badge>
<Badge type="warning">warning</Badge>
<Badge type="criticalInverted">critical</Badge>
<Badge type="critical">critical</Badge>
<Badge type="dark">dark</Badge>
<Badge type="white">white</Badge>
<Badge type="neutral">neutral (default)</Badge>
<Badge type="info">info</Badge>
<Badge type="infoSubtle">infoSubtle</Badge>
<Badge type="success">success</Badge>
<Badge type="successSubtle">successSubtle</Badge>
<Badge type="warning">warning</Badge>
<Badge type="warningSubtle">warningSubtle</Badge>
<Badge type="critical">critical</Badge>
<Badge type="criticalSubtle">criticalSubtle</Badge>
<Badge type="dark">dark</Badge>
<Badge type="white">white</Badge>

ModalFooter

<ModalFooter flex={flex}>
<Button fullWidth>Continue to Payment</Button>
</ModalFooter>
<ModalFooter flex={flex}>
<Box justify="end" display="flex">
<Button>Continue to Payment</Button>
</Box>
</ModalFooter>

InputField

Select

Tokens

Translations

Popover

Tooltip

MobileDialogPrimitive

SkipNavigation

Drawer

Alert

Card

Modal

Breadcrumbs

NavigationBar

Wizard

Deprecated

Card