Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

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

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>

</>

Referring to other elements

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>

    </>

  )

}

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'
Leave feedback

Contents

All components (A-Z)