Annotation

Display informative text related to an object on screen. Unlike the tooltip an annotation is not interactive.

Don't put links or interactive elements in annotations - use Popover instead
Don’t use annotations if trigger is needed - use Tooltips instead

Basic Usage

Show editable code example

Any Paragon component or export may be added to the code example.

<>
  <Annotation>
    Success variant
  </Annotation>
  <Annotation 
    variant="dark"
    arrowPlacement="left"
    className="mie-2 mb-2"
  >
    Dark variant
  </Annotation>
  <Annotation 
    variant="error" 
    arrowPlacement="top"
    className="mie-2 mb-2"
  >
    Error variant
  </Annotation>
  <Annotation
    variant="warning"
    arrowPlacement="right" 
    className="mb-2"
  >
    Warning variant
  </Annotation>
  <Annotation
    variant="light"
    className="mb-2"
  >
    Light variant. By default max width is set to 300px with wrapping text.
  </Annotation>
</>

<>
  <Annotation>
    Success variant
  </Annotation>
  <Annotation 
    variant="dark"
    arrowPlacement="left"
    className="mie-2 mb-2"
  >
    Dark variant
  </Annotation>
  <Annotation 
    variant="error" 
    arrowPlacement="top"
    className="mie-2 mb-2"
  >
    Error variant
  </Annotation>
  <Annotation
    variant="warning"
    arrowPlacement="right" 
    className="mb-2"
  >
    Warning variant
  </Annotation>
  <Annotation
    variant="light"
    className="mb-2"
  >
    Light variant. By default max width is set to 300px with wrapping text.
  </Annotation>
</>

Referring to other elements

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const [arrowPlacement, setArrowPlacement] = useState('left')
  const wrapperClass = arrowPlacement === 'top' || arrowPlacement === 'bottom' ? 'flex-column' : '';
  return (
    <>
      {/* start example form block */}
      <ExamplePropsForm
        inputs={[
          { value: arrowPlacement, setValue: setArrowPlacement, options: [
            { name: 'left', value: 'right' },
            { name: 'top', value: 'bottom' },
            { name: 'right', value: 'left' },
            { name: 'bottom', value: 'top' }
          ], name: 'arrowPlacement' },
        ]}
      />
      {/* end example form block */}
        <div className={`d-flex align-items-center justify-content-center ${wrapperClass}`}>
            {(arrowPlacement === 'bottom') && (
                <Annotation arrowPlacement={arrowPlacement}>
                    Annotation on top
                </Annotation>
            )}
            {(arrowPlacement === 'right') && (
                <Annotation arrowPlacement={arrowPlacement}>
                    Annotation on left
                </Annotation>
            )}
            <Button>This is an example button</Button>
            {(arrowPlacement === 'left') && (
                <Annotation arrowPlacement={arrowPlacement}>
                    Annotation on right
                </Annotation>
            )}
            {(arrowPlacement === 'top') && (
                <Annotation arrowPlacement={arrowPlacement}>
                    Annotation on bottom
                </Annotation>
            )}
        </div>
    </>
  )
}

() => {
  const [arrowPlacement, setArrowPlacement] = useState('left')
  const wrapperClass = arrowPlacement === 'top' || arrowPlacement === 'bottom' ? 'flex-column' : '';
  return (
    <>
      {/* start example form block */}
      <ExamplePropsForm
        inputs={[
          { value: arrowPlacement, setValue: setArrowPlacement, options: [
            { name: 'left', value: 'right' },
            { name: 'top', value: 'bottom' },
            { name: 'right', value: 'left' },
            { name: 'bottom', value: 'top' }
          ], name: 'arrowPlacement' },
        ]}
      />
      {/* end example form block */}
        <div className={`d-flex align-items-center justify-content-center ${wrapperClass}`}>
            {(arrowPlacement === 'bottom') && (
                <Annotation arrowPlacement={arrowPlacement}>
                    Annotation on top
                </Annotation>
            )}
            {(arrowPlacement === 'right') && (
                <Annotation arrowPlacement={arrowPlacement}>
                    Annotation on left
                </Annotation>
            )}
            <Button>This is an example button</Button>
            {(arrowPlacement === 'left') && (
                <Annotation arrowPlacement={arrowPlacement}>
                    Annotation on right
                </Annotation>
            )}
            {(arrowPlacement === 'top') && (
                <Annotation arrowPlacement={arrowPlacement}>
                    Annotation on bottom
                </Annotation>
            )}
        </div>
    </>
  )
}

Theme Variables (SCSS)#

$annotation-padding:                .5rem !default;
$annotation-box-shadow:             drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
$annotation-border-radius:          .25rem !default;
$annotation-max-width:              18.75rem !default;
$annotation-font-size:              $font-size-sm !default;
$annotation-line-height:            $line-height-sm !default;
$annotation-variants:  (
  "success": ( "background-color": $success, "color": $white ),
  "warning": ( "background-color": $accent-b, "color": $black ),
  "error":   ( "background-color": $danger, "color": $white ),
  "light":   ( "background-color": $white, "color": $primary-500 ),
  "dark":    ( "background-color": $dark, "color": $white ),
) !default;
$annotation-arrow-side-margin:      .25rem !default;
$annotation-arrow-border-width:     .5rem !default;

Props API#

Annotation Props API

children node Required
Specifies contents of the component.
className string
Specifies class name to append to the base element.
variant enum'error' | 'success' | 'warning' | 'light' | 'dark'
Specifies variant to use.
Default'success'
arrowPlacement enum'top' | 'right' | 'bottom' | 'left'
Specifies arrow position.
Default'bottom'

Edit this page Leave feedback

Paragon Design System

Theme

Annotation

Basic Usage

Referring to other elements

Theme Variables (SCSS)#

Props API#

All components (A-Z)

Theme

Annotation

Basic Usage#

Referring to other elements#

Theme Variables (SCSS)#

Props API#

All components (A-Z)

Basic Usage

Referring to other elements