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

# Evidențiere

> Feedback cu conținut de nod, acțiuni și închidere controlată de apelant.

## Prezentare generală

`Callout` combină noduri de titlu, descriere, pictogramă și acțiune. Utilizează `status` pentru `neutral`, `info`, `success`, `warning` sau `error`. Implicit, este `info` și acceptă aspectul `soft`. Starea selectează o paletă gri, albastră, verde, portocalie sau roșie; `color` înlocuiește acea paletă fără a schimba sensul.

**Light**

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

**Dark**

[Exemplu 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)

## Utilizare

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

## Opțiuni vizuale

Comparați stările semantice folosind același conținut. Alegeți o stare pentru semnificația mesajului și suprascrieți culoarea numai atunci când designul înconjurător o impune.

**Light**

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

**Dark**

[Stări de feedback pentru 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)

## Notificare care poate fi închisă

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

## Închidere și etichete

Transmiterea `onDismiss` expune un buton de închidere accesibil. Fiecare activare prin indicator sau tastatură îl apelează o dată. Callout-ul rămâne redat până când apelantul său îl ascunde. Omiteți `onDismiss` pentru un mesaj persistent. Valoarea implicită pentru `closeLabel` este `Close`.

Aplicația dvs. deține conținutul, acțiunile, numele accesibile și traducerile. Utilizați `Callout.Action` pentru un buton ghost mic, cu grosime normală a fontului. Acceptă proprietăți Button, inclusiv atribute de link, starea dezactivată, referințe și redare personalizată; dimensiunea și aspectul sunt fixe. Zona pentru acțiuni acceptă și butoane personalizate, linkuri, controale dezactivate sau mai multe noduri. Pictograma implicită de ajutor este decorativă; transmiteți `icon={null}` pentru a o omite sau furnizați un nod cu semantică accesibilă adecvată. Twenty nu necesită un furnizor i18n.

## Integrare nativă

Atributele native, `className`, `style` și `ref` vizează elementul rădăcină `div`. Utilizați `render` pentru a compune un alt element rădăcină sau un callback care primește proprietățile rădăcinii și `{ status, variant, color }`. `title` și `description` sunt zone de conținut. `fullWidth` elimină lățimea maximă implicită de 512px.

Componenta nu adaugă niciun rol de regiune live și nicio notificare. Furnizați `role`, `aria-live` și alte atribute accesibile native atunci când fluxul de lucru din jur le necesită.

## Migrare

Înlocuiți `variant` semantic anterior cu `status` și constructorul `Icon` cu un nod `icon`. Înlocuiți obiectele de acțiune `{ label, onClick }` cu `Callout.Action` sau controale personalizate. Înlocuiți `isClosable` și `onClose` cu `onDismiss` și redați condiționat callout-ul în apelant atunci când închiderea ar trebui să îl ascundă. Conținutul tradus existent și etichetele acțiunilor rămân în aplicație.

## Proprietăți

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