Skip to content
Home

Skeleton

Info
Demos
Properties

Demos

Input with Skeleton

Code Editor
<Input label="Input" skeleton />

Toggle skeleton on/off

Heading

Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.

Code Editor
const UserData = () => {
  const [state, setState] = React.useState(true)
  return (
    <Skeleton show={state}>
      <H2 top bottom>
        Heading
      </H2>
      <P top bottom>
        Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.
      </P>
      <Input label_direction="vertical" label="Input" />
      <Skeleton.Exclude>
        <ToggleButton
          checked={state}
          on_change={({ checked }) => setState(checked)}
          top="large"
        >
          Toggle
        </ToggleButton>
      </Skeleton.Exclude>
    </Skeleton>
  )
}
render(<UserData />)

Skeleton wrapper

Heading

Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.

Code Editor
<Skeleton show>
  <H2 top bottom>
    Heading
  </H2>
  <P top bottom>
    Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.
  </P>
  <Button>Button</Button>
</Skeleton>

Skeleton using Eufemia Provider

You can also use formElement={{ skeleton: true }}.

Heading

Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.

Code Editor
<Provider skeleton={true}>
  <H2 top bottom>
    Heading
  </H2>
  <P top bottom>
    Paragraph Non habitasse ut nisi dictum laoreet ridiculus dui.
  </P>
  <Button>Button</Button>
</Provider>

Skeleton figures

You may import a given figure, or create your own.

import { Article } from '@dnb/eufemia/components/skeleton/figures'
‌
‌
‌
‌
‌
Code Editor
<Skeleton show figure={<Article rows={5} />}>
  hidden content
</Skeleton>