> ## 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.

# Aviso destacado

> Comentarios con contenido de nodo, acciones y descarte controlado por quien realiza la llamada.

## Resumen

`Callout` combina nodos de título, descripción, icono y acción. Usa `status` para `neutral`, `info`, `success`, `warning` o `error`. El valor predeterminado es `info` y admite la apariencia `soft`. El estado selecciona una paleta gris, azul, verde, naranja o roja; `color` anula esa paleta sin cambiar el significado.

**Light**

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

**Dark**

[Ejemplo de 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)

## "Uso"

```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>}
  />
);
```

## Opciones visuales

Compare los estados semánticos usando el mismo contenido. Elija un estado para el significado del mensaje y anule el color solo cuando el diseño circundante lo requiera.

**Light**

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

**Dark**

[Estados de comentarios de 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)

## Aviso descartable

```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>
    </>
  );
};
```

## Descarte y etiquetas

Pasar `onDismiss` expone un botón de cierre accesible. Cada activación con puntero o teclado lo llama una vez. El callout permanece renderizado hasta que quien lo invoca lo oculta. Omite `onDismiss` para un mensaje persistente. `closeLabel` usa `Close` de forma predeterminada.

Tu aplicación es propietaria del contenido, las acciones, los nombres accesibles y las traducciones. Usa `Callout.Action` para un botón fantasma pequeño con un grosor de fuente normal. Acepta las props de Button, incluidos los atributos de enlace, el estado deshabilitado, las refs y el renderizado personalizado; el tamaño y la apariencia son fijos. El espacio para acciones también acepta botones personalizados, enlaces, controles deshabilitados o varios nodos. El icono de ayuda predeterminado es decorativo; pasa `icon={null}` para omitirlo o proporciona un nodo con la semántica accesible adecuada. Twenty no requiere un proveedor de i18n.

## Integración nativa

Los atributos nativos, `className`, `style` y `ref` se aplican al `div` raíz. Usa `render` para componer un elemento raíz diferente o una devolución de llamada que reciba las props raíz y `{ status, variant, color }`. `title` y `description` son espacios de contenido. `fullWidth` elimina el ancho máximo predeterminado de 512px.

El componente no agrega ningún rol de región activa ni anuncios. Proporciona `role`, `aria-live` y otros atributos accesibles nativos cuando el flujo de trabajo circundante los requiera.

## Migración

Reemplaza el `variant` semántico anterior por `status`, y el constructor `Icon` por un nodo `icon`. Reemplaza los objetos de acción `{ label, onClick }` por `Callout.Action` o controles personalizados. Reemplaza `isClosable` y `onClose` por `onDismiss`, y renderiza condicionalmente el callout en quien lo invoca cuando descartarlo deba ocultarlo. El contenido traducido y las etiquetas de acción existentes permanecen en la aplicación.

## "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.