## Feature Examples ### Skin - description:

Control the appearance of the floating notification with type prop. It supports 7 options:

  • standard (default) - use it to provide additional information relevant to current user task or an action.
  • success - use it to inform users about successful operation.
  • destructive - use it for error messages and information about critical issues that prevent to continue.
  • warning - use it to draw the user's attention to unresolved issues that might affect the application, but doesn't block the process.
  • premium - use it for premium upgrades only — packages that let accept payments, connect domain and have business email. Read more about Premium patterns.
  • preview - use it to present process status or related additional data.
  • dark - use it to emphasize informational messages in the context of other content.
    • - example: ```jsx ``` ### Width - description:

    Control component width in pixels or percentage with width prop.

    Set component to fill 100% of its parent container width with fullWidth prop. Prop has an effect on notification appearance - it removes left/right borders and corner radius, changes component height and paddings.

    - example: ```jsx ; ``` ### Actions - description:

    Add call to actions to a notification with:

  • buttonProps - use to add a primary action
  • textButtonProps - use it to add a text button. Add a link to an external URL with href prop.

    • Component can have both actions at the same time.

    - example: ```jsx ; ``` ### Close Button - description:

    Control whether notification can be dismissed by a user with showCloseButton prop.

    - example: ```jsx ; ``` ### Prefix - description:

    Add more context for the notification purpose with prefixIcon.

    - example: ```jsx } />; ``` ## Common Use Case Examples ### In front of content - description:

    Position notification on top of content in modals to update users about the status change.

    - example: ```jsx () => { const [state, setState] = React.useState(true); return ( setState(true)} primaryButtonOnClick={() => setState(true)} secondaryButtonOnClick={() => setState(true)} > {state && ( } type="destructive" text="Fix email value to save account details." onClose={() => setState(false)} /> )} ); }; ``` ### Inline with content - description:

    Place notifications first in the section that they apply to.

    - example: ```jsx } text="You don't have ways of Earning Points enabled, so users can't collect points. Enable at least one of the way below." /> ), width: 'auto', }, { value: ( Make a Restaurant Order Give 1 points for every 1$ spent. ), }, { value: ( ), width: 'auto', }, ]} /> ), width: 'auto', }, { value: ( Sign Up to the Site Give 100 points after sign up. ), }, { value: ( ), width: 'auto', }, ]} /> ; ```