Components
Nudge
A nudge should be used when introducing a new feature. It can be used to draw attention to a new button, entrance, functionality, or elements that have been relocated.
For multi step nudges, check out Wizard Nudge
Examples
A simple nudge
<Nudge introducedDate="2029-02-19"> <NudgeTrigger>Check this feature out</NudgeTrigger> <NudgeContent> We have done some changes to the app! <NudgeActions> <NudgeCloseTrigger> <Button variant="tertiary">Close</Button> </NudgeCloseTrigger> <Button variant="primary">Show me</Button> </NudgeActions> </NudgeContent> </Nudge>
Guidelines
Each team is responsible for their own tooltips and nudges. They are accountable for maintaining them, ensuring accessibility, and removing them after a defined period.
It's crucial to set an expiration date for a nudge. How long should it be visible, and who should it be visible to? It may be appropriate to focus on existing customers, newly created profiles, or even specific customer segments.
Code
<Nudge />
import { Nudge } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Children should contain NudgeTrigger and NudgeContent | |
introducedDate | string | The date the nudge was introduced. Will expire 1 month later. Format yyyy-mm-dd | |
size | "sm" | "md" | "lg" | Defaults to "smmd. Use "sm" or "lg" if you have less or more content. | |
open | boolean | ||
onOpenChange | (details: {details: {open: boolean}}) => void | ||
positioning | PositioningOptions | Different options for positon. Placemnet can be set to "left", "right", "top", "bottom" |
<NudgeTrigger />
import { NudgeTrigger } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | The anchor of the nudge. |
<NudgeContent />
import { NudgeContent } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Content of nudge | |
showCloseButton | boolean | defaults to true |