Welcome UI logo

StickyNote

The StickyNote component provides a way to display brief, important information or reminders in a visually distinct manner. It mimics the appearance of physical sticky notes, making it easy for users to quickly identify and reference key details. This component is ideal for highlighting tips, warnings, or any other content that requires immediate attention within an application.

Source
OverviewProps
import { StickyNote } from 'welcome-ui/StickyNote'


const Example = () => {
  return (
    <StickyNote>
      <StickyNote.Title>Title</StickyNote.Title>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </StickyNote>
  )
}


export default Example

Examples

Variants

Different variants are available to suit your design needs. You can choose between brand (default), blue, teal, green, violet, orange or pink variants to convey different types of messages effectively.

Action

A call-to-action encouraging the user to take an action. It's a predefined button styled to fit within the StickyNote component.

Shapes

Choose from various shapes including square (default) and rectangle to match your application's aesthetic and enhance visual appeal.

Full Width

On some case we want the StickyNote to take all the width of its container, you can use the isFullWidth prop to achieve this.

Icon

Customize the icon displayed in the title of the sticky note by using the icon prop. This allows you to select an icon that best represents the content or purpose of the note.

Close Button

Add handleClose prop to include a close button, allowing users to dismiss the sticky note when it's no longer needed.

AlertToast