Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

Hide

Hide er en av våre layout primitives. Komponenten gjør det enkelt å gjemme elementer ved bestemte brekkpunkt.

StabilOppdatert 9. mai 2025
GithubEndringslogg

Egnet til:

  • Gjemme elementer basert på brekkpunkt
  • Gjemme sidebar på desktop
  • Gjemme menypunkt i header på desktop

Uegnet til:

  • Gjemme elementer basert på state

Eksempler

Retningslinjer

Hide fungerer ved å sette display: none. Det betyr at children som ikke vises fortsatt vil rendres i DOM-en. Hide er derfor ikke en erstatning for lazy-loading, men en utility for å skjule elementer på spesifikke brekkpunkt.

Props

Hide

above?

  • Type:
    "sm" | "md" | "lg" | "xl" | "2xl"
  • Default:
    "null"
  • Description:

    Will show/hide element above breakpoint (inclusive)

below?

  • Type:
    "sm" | "md" | "lg" | "xl" | "2xl"
  • Default:
    "null"
  • Description:

    Will show/hide element below breakpoint (inclusive)

as?

  • Type:
    "div" | "span"
  • Default:
    ""div""
  • Description:

    Overrides html-tag

asChild?

  • Type:
    boolean
  • Description:

    When true, will render element as its child. This merges classes, styles and event handlers.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs