> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Riquadro informativo

> Feedback con contenuto del nodo, azioni e chiusura gestita dal chiamante.

## Panoramica

`Callout` combina titolo, descrizione, icona e nodi di azione. Usa `status` per `neutral`, `info`, `success`, `warning` o `error`. Il valore predefinito è `info` e supporta l'aspetto `soft`. Lo stato seleziona una palette grigia, blu, verde, arancione o rossa; `color` sostituisce tale palette senza modificarne il significato.

**Light**

[Esempio di callout (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-callout--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di callout (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-callout--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-callout--display)

## Utilizzo

```tsx theme={null}
import { Callout } from 'twenty-ui/components/feedback';

export const WorkflowNotice = () => (
  <Callout
    status="neutral"
    title="This form will appear in workflow runs."
    description="Because this workflow is not using a manual trigger, the form will not open on top of the interface. To fill it, open the corresponding workflow run and complete the form there."
    action={<Callout.Action>Learn more</Callout.Action>}
  />
);
```

## Opzioni visive

Confronta gli stati semantici utilizzando lo stesso contenuto. Scegli uno stato per il significato del messaggio e sostituisci il colore solo quando il design circostante lo richiede.

**Light**

[Stati di feedback del callout (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-callout--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Stati di feedback del callout (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-callout--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-callout--catalog)

## Avviso chiudibile

```tsx theme={null}
import { useState } from 'react';
import { Callout } from 'twenty-ui/components/feedback';
import { IconAlertTriangle } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';

export const ImportNotice = ({ onReview }: { onReview: () => void }) => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <>
      {isVisible && (
        <Callout
          status="warning"
          title="Some records need attention"
          description="Review the missing email addresses before importing."
          icon={<IconAlertTriangle size={16} aria-hidden="true" />}
          action={
            <Callout.Action onClick={onReview}>Review records</Callout.Action>
          }
          onDismiss={() => setIsVisible(false)}
          closeLabel="Dismiss import notice"
        />
      )}
      <Button onClick={() => setIsVisible(true)}>Show notice</Button>
    </>
  );
};
```

## Chiusura ed etichette

Passando `onDismiss` viene esposto un pulsante di chiusura accessibile. Ogni attivazione tramite puntatore o tastiera lo richiama una volta. Il callout rimane visualizzato finché il chiamante non lo nasconde. Ometti `onDismiss` per un messaggio persistente. Il valore predefinito di `closeLabel` è `Close`.

L'applicazione gestisce il contenuto, le azioni, i nomi accessibili e le traduzioni. Utilizza `Callout.Action` per un piccolo pulsante ghost con spessore del carattere normale. Accetta le props di Button, inclusi gli attributi dei link, lo stato disabilitato, i ref e il rendering personalizzato; dimensione e aspetto sono fissi. Lo slot dell'azione accetta anche pulsanti personalizzati, link, controlli disabilitati o più nodi. L'icona di aiuto predefinita è decorativa; passa `icon={null}` per ometterla oppure fornisci un nodo con semantica accessibile appropriata. Twenty UI non richiede un provider i18n.

## Integrazione nativa

Gli attributi nativi, `className`, `style` e `ref` hanno come destinazione il `div` radice. Utilizza `render` per comporre un elemento radice diverso o un callback che riceve le props radice e `{ status, variant, color }`. `title` e `description` sono slot di contenuto. `fullWidth` rimuove la larghezza massima predefinita di 512px.

Il componente non aggiunge alcun ruolo di regione live né annunci. Fornisci `role`, `aria-live` e altri attributi accessibili nativi quando il workflow circostante li richiede.

## Migrazione

Sostituisci il precedente `variant` semantico con `status` e il costruttore `Icon` con un nodo `icon`. Sostituisci gli oggetti azione `{ label, onClick }` con `Callout.Action` o controlli personalizzati. Sostituisci `isClosable` e `onClose` con `onDismiss` e visualizza condizionalmente il callout nel chiamante quando la chiusura deve nasconderlo. Il contenuto tradotto e le etichette delle azioni esistenti rimangono nell'applicazione.

## Props

**action** `ReactNode`

Optional footer node. Use Callout.Action for the standard action or supply custom controls.

**className** `string`

Additional class names merged onto the root.

**closeLabel** `string` (default: Close)

Accessible name of the dismiss button. Defaults to `Close`.

**color** `"blue" | "gray" | "green" | "orange" | "red"` (default: status palette)

Palette override: gray, blue, green, orange, or red. Defaults to the status palette.

**description** `ReactNode`

Optional supporting content node. Empty slots are hidden.

**fullWidth** `boolean` (default: false)

Removes the default 512px maximum width.

**icon** `ReactNode` (default: decorative help icon)

Leading icon node. Defaults to a decorative help icon. Pass null to omit it.

**onDismiss** `(() =\> void)`

Shows a dismiss button and notifies the caller once per activation. The caller owns visibility.

**ref** `Ref\<HTMLDivElement\>`

Ref to the root div, or the element supplied through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, CalloutState\>`

Element or callback composition for the root. Receives status, variant, and color state.

**status** `"error" | "info" | "neutral" | "success" | "warning"` (default: info)

Feedback meaning: neutral, info, success, warning, or error. Defaults to info.

**style** `CSSProperties`

Inline styles forwarded to the root.

**title** `ReactNode` *required*

Main message node displayed beside the icon.

**variant** `"soft"` (default: soft)

Supported appearance: soft.

### Callout.Action

**Action.className** `string | ((state: ButtonState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Action.color** `"accent" | "danger" | "inherit" | "neutral" | "success"`

Semantic color of the button. `inherit` uses the surrounding text color for the label, icons, loader, and outline border, with translucent black interaction surfaces. It supports outline, ghost, soft, and link. Resolving solid with inherit throws, including appearance inherited from ButtonGroup and wrapper defaults.

**Action.elevated** `boolean`

Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.

**Action.endIcon** `ReactNode`

Decorative content displayed after the label.

**Action.focusableWhenDisabled** `boolean` (default: false)

Whether the button should be focusable when disabled.

**Action.fullWidth** `boolean`

Expands the button to fill its container width.

**Action.href** `string`

Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.

**Action.loading** `boolean`

Shows a loading indicator and disables activation.

**Action.loadingPosition** `"center" | "end" | "start"`

Where the loading indicator appears. `center` hides the content while preserving its layout space; `start` and `end` keep children and the opposite icon visible and replace the corresponding icon with the spinner.

**Action.nativeButton** `boolean` (default: true)

Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in `href` anchor defaults to false; an explicit value takes precedence.

**Action.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, ButtonState\>`

Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use `nativeButton={false}` and `role="link"` for a custom navigation anchor. Router integration belongs to the caller.

**Action.role** `AriaRole`

Role of the root element. Use `link` for custom navigation renderers.

**Action.shortcut** `ShortcutDefinition`

Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.

**Action.shortcutJoinLabel** `string`

Localized text between sequence steps. Defaults to then.

**Action.startIcon** `ReactNode`

Decorative content displayed before the label.

**Action.style** `CSSProperties | ((state: ButtonState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.