Callout

Et element som tiltrekker oppmerksomhet til viktig informasjon.

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Enkel callout

Callout belyser viktig informasjon.

<Stack gap="lg">
  <Callout title="Her er et varsel." variant="info" />
  <Callout title="Oppdater betalingskort" variant="error">
    <Typography variant="paragraph" as="p">
      For å gjennomføre betaling, må du ha et gyldig betalingskort.
    </Typography>
  </Callout>
</Stack>

Varianter

Velg blant info, warning, success og error.

<Stack gap="lg">
  <Callout title="Her er et varsel." variant="info" />
  <Callout title="Her er et varsel." variant="warning" />
  <Callout title="Her er et varsel." variant="success" />
  <Callout title="Her er et varsel." variant="error" />
</Stack>

Overstyring av ikoner

Variantene har egne, passende ikoner, men de kan også bli overstyrt med icon.

<Stack gap="lg">
  <Callout icon={false} title="Jeg er uten ikon" variant="info" />
  <Callout icon={EnergyIcon} title="Jeg er overstyrt med annet ikon" variant="warning" />
</Stack>

Ekspanderbar callout

Bruk isExpandable for å gjøre om alerten til ekspanderbar..

<Callout isExpandable title="Oppdater betalingskort" variant="error">
  <Typography variant="paragraph" as="p">
    For å gjennomføre betaling, må du ha et gyldig betalingskort.
  </Typography>
</Callout>

Med lukking

Bruk onClose til å styre lukking.

function CloseableCallout() {
  const [isClosed, setIsClosed] = React.useState(false);

  const handleClose = () => {
    setIsClosed(true);
  };

  const handleOpen = () => {
    setIsClosed(false);
  };

  return (
    isClosed ? 
      <Button variant="secondary" onClick={handleOpen}>Åpne</Button> : 
      <Callout
        closeAriaLabel="Lukk"
        onClose={handleClose}
        title="Jeg kan lukkes"
        variant="info"
      />
  );
}

Retningslinjer

Se patterns.

Kode

<Callout />

import { Callout } from "@aneo-org/design-react/clientComponents";

Callout.

Prop	Type	Beskrivelse
children?	`ReactNode`	Innhold.
closeAriaLabel?	`string`	Tekst for skjermleser ved lukking.
icon?	`ComponentType \| boolean`	Overstyr variant-ikoner.
isExpandable?	`boolean`	Gjør callout-en ekspanderbar.
onClose?	`() => void`	Callback for lukke-knappen.
title	`string`	Tittel-tekst. Implementert med Typography-komponenten, variant5.