Product Updates

ProductUpdates component allows the user to showcase new features or updates in a non-distractive way by displaying the information in a floating popover with a high-contrast setting that catches the eye of the user.

With dismiss link

With dismiss button

With custom content

import React from "react";
import { ProductUpdates } from "@nimbus-ds/patterns";
import { Text } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <ProductUpdates
    title="Title"
    text="Content text"
    dismissLink="Dismiss Popover"
    visible={true}
  >
    <Text fontSize="base" color="primary-interactive" textAlign="center">
      This is a new feature that is being showcased by our Product Updates
      component
    </Text>
  </ProductUpdates>
);

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/productupdates

Props

Additional props are passed to the <ProductUpdates> element. See div docs for a list of props accepted by the <ProductUpdates> element.