Note

Display text that requires attention or provides additional information.

Default

A small note.

A default note.

A large note.

<template>
  <PStack gap="2">
    <PNote size="sm"> A small note. </PNote>

    <PNote> A default note. </PNote>

    <PNote size="lg"> A large note. </PNote>
  </PStack>
</template>

Action

This note details some information.

This note details a large amount information that could potentially wrap into two or more lines, forcing the height of the Note to be larger.

<template>
  <PStack gap="2">
    <PNote>
      This note details some information.

      <template #action>
        <PButton variant="primary" size="sm"> Upgrade </PButton>
      </template>
    </PNote>

    <PNote>
      This note details a large amount information that could potentially wrap into two or more
      lines, forcing the height of the Note to be larger.

      <template #action>
        <PButton variant="primary" size="sm"> Upgrade </PButton>
      </template>
    </PNote>
  </PStack>
</template>

Variants

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<template>
  <PStack direction="vertical" gap="3">
    <PNote variant="default"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="primary"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="success"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="error"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="warning"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="violet"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="cyan"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="ghost"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="default" fill> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="primary" fill> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="success" fill> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="error" fill> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="warning" fill> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="violet" fill> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <PNote variant="cyan" fill> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>
  </PStack>
</template>

Label

Custom Label

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Custom Label Lorem ipsum dolor sit amet consectetur adipisicing elit.

No Label

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<template>
  <PStack direction="vertical">
    <b class="text-sm font-medium">Custom Label</b>

    <!-- prop label -->
    <PNote label="Note"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>

    <!-- slot label -->
    <PNote>
      <template #label>
        <b class="text-sm font-medium">Custom Label</b>
      </template>

      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </PNote>

    <b class="text-sm font-medium">No Label</b>
    <PNote :label="false"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </PNote>
  </PStack>
</template>

Props

Name	Type	Default	Description
variant	`'success' \| 'error' \| 'warning' \| 'default' \| 'primary' \| 'violet' \| 'cyan'`	`default`	`ghost`
size	`'sm' \| 'md' \| 'lg'`	-	Padding and text size, falls back to the `ConfigProvider` size
fill	`boolean`	-	Fill the background instead of only drawing a border
label	`boolean \| string \| number \| null`	`true`	`true` renders the variant icon, a string renders text, `false` hides it

Slots

Name	Description
default	Default slot

PXD

Note

Default

Action

Variants

Label

Props

Slots

Source