Documentation
Note

Note

Display text that requires attention or provides additional information.

Usage

First of all, you need to import the Note component from the kitchn package.

import { Note } from "kitchn"

Size

The size of the note can be changed using the size prop.

<Container row align={"flex-start"} gap={10}>
    <Note size="small">A small note.</Note>
    <Note>A default note.</Note>
    <Note size="large">A large note.</Note>
  </Container>
Code Editor
<Container row align={"flex-start"} gap={10}>
    <Note size="small">A small note.</Note>
    <Note>A default note.</Note>
    <Note size="large">A large note.</Note>
  </Container>

Action

<Container gap={10}>
  <Note
    action={
      <Button
        size="small"
        onClick={() => alert("I'll take note ahah")}
      >
        Upgrade
      </Button>
    }
  >
    This note details some information.
  </Note>

  <Note
    action={
      <Button
        size="small"
        onClick={() => alert("I'll take note ahah")}
      >
        Upgrade
      </Button>
    }
  >
    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.
  </Note>
</Container>
Code Editor
<Container gap={10}>
  <Note
    action={
      <Button
        size="small"
        onClick={() => alert("I'll take note ahah")}
      >
        Upgrade
      </Button>
    }
  >
    This note details some information.
  </Note>

  <Note
    action={
      <Button
        size="small"
        onClick={() => alert("I'll take note ahah")}
      >
        Upgrade
      </Button>
    }
  >
    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.
  </Note>
</Container>

Types

<Container gap={10}>
  <Note type={"secondary"}>This note details some information.</Note>
  <Note type="info">info</Note>
  <Note type="success">success</Note>
  <Note type="danger">danger</Note>
  <Note type="warning">warning</Note>
</Container>
Code Editor
<Container gap={10}>
  <Note type={"secondary"}>This note details some information.</Note>
  <Note type="info">info</Note>
  <Note type="success">success</Note>
  <Note type="danger">danger</Note>
  <Note type="warning">warning</Note>
</Container>

Label

Hidden label

<Container>
  <Note label={false}>This note details some information.</Note>
</Container>
Code Editor
<Container>
  <Note label={false}>This note details some information.</Note>
</Container>

Custom label

<Container>
  <Note label={"Custom"}>This note details some information</Note>
</Container>
Code Editor
<Container>
  <Note label={"Custom"}>This note details some information</Note>
</Container>

Filled

<Container gap={10}>
  <Note fill>This note details something important.</Note>
  <Note fill type="secondary">
    This note details some information.
  </Note>
  <Note fill type="info">
    This note details an info.
  </Note>
  <Note fill type="success">
    This note details a success.
  </Note>
  <Note fill type="danger">
    This note details a danger.
  </Note>
  <Note fill type="warning">
    This note details a warning.
  </Note>
</Container>
Code Editor
<Container gap={10}>
  <Note fill>This note details something important.</Note>
  <Note fill type="secondary">
    This note details some information.
  </Note>
  <Note fill type="info">
    This note details an info.
  </Note>
  <Note fill type="success">
    This note details a success.
  </Note>
  <Note fill type="danger">
    This note details a danger.
  </Note>
  <Note fill type="warning">
    This note details a warning.
  </Note>
</Container>

Props

NameTypeDefaultRequiredDescriptionAccepted values
sizestringnormal-The size of the note.small, normal, large
typestringprimary-The type of the note.primary, secondary, info, success, warning, danger
actionJSX.Element--The action of the note.-
fillbooleanfalse-The fill color of the note.-
labelstring, booleantrue-The label of the note.-