Banner încorporat

Prezentare generală

InlineBanner combină Banner cu un aspect inline cu colțuri rotunjite și o pictogramă decorativă de informații. Acesta partajează contractele independente ale Banner pentru status, variant, color, icon și action. Aspectul său implicit este soft, iar starea sa implicită este info.

Utilizare

import { InlineBanner } from 'twenty-ui/components/feedback';

export const ModelsBanner = ({ onConfigure }: { onConfigure: () => void }) => (
  <InlineBanner
    status="error"
    action={
      <InlineBanner.Action onClick={onConfigure}>
        Configure models
      </InlineBanner.Action>
    }
  >
    No AI models are enabled.
  </InlineBanner>
);

Aspectul standard umple lățimea disponibilă. Elementele copil de tip șir simplu sunt trunchiate, iar focalizarea prin tastatură, trecerea indicatorului sau atingerea afișează șirul complet într-un indiciu. Elementele copil de tip nod bogat sunt randate direct, astfel încât linkurile și controalele încorporate își păstrează propria semantică. Definiți explicit tipografia atunci când conținutul bogat necesită trunchiere. Utilizați layout="compact" pentru conținut cu încadrare pe rânduri, spațiere mai mică și o lățime maximă a conținutului de 512px. Adăugați fullWidth pentru a elimina această limită și a umple lățimea disponibilă a părintelui, inclusiv spațierea interioară și marginile. Implicit este false și nu modifică aspectul standard, care deja își umple părintele. Nu are margine inferioară. Aspectul este independent de aspectul solid sau soft. embedded elimină marginea inferioară a aspectului standard.

import { InlineBanner } from 'twenty-ui/components/feedback';
import { IconInfoCircle } from 'twenty-ui/icon';

export const ConnectionBanner = () => (
  <InlineBanner
    layout="compact"
    status="warning"
    color="blue"
    icon={<IconInfoCircle aria-hidden="true" />}
    action={
      <InlineBanner.Action href="/settings/accounts">
        Connection settings
      </InlineBanner.Action>
    }
  >
    Connect your account to sync contacts.
  </InlineBanner>
);

InlineBanner.Action oferă un buton mic conturat care moștenește culoarea afișată a bannerului, inclusiv suprascrierile explicite ale paletei și aspectele solide. Acceptă interacțiuni Button, linkuri, referințe și randare personalizată. Zona action acceptă și controale arbitrare. Ținta rădăcină este un div. Proprietățile native, className, style și ref vizează acea rădăcină; render din Base UI poate compune un alt element și primește starea Banner rezolvată. action acceptă orice ReactNode, inclusiv mai multe controale cu API-urile Button sau de link complete. icon={null} elimină pictograma implicită. Apelantul decide dacă bannerul este randat și dacă modificările trebuie anunțate. Furnizați role="status" și aria-live="polite" sau un înveliș adecvat pentru regiune live, atunci când este necesar. Status nu atribuie semantică de regiune live. Denumiți controalele de acțiune și marcați pictogramele personalizate decorative cu aria-hidden.

Migrare

Înlocuiți message cu children, LeftIcon={Icon} cu icon={<Icon />} și configurația button cu un nod action. Utilizați InlineBanner.Action pentru a menține stilizarea acțiunii aliniată cu bannerul. Înlocuiți variant="compact" cu layout="compact"; standard este acum aspectul implicit. Utilizați status="error" pentru semnificația de eroare sau color="red" pentru o suprascriere a paletei.

Proprietăți

ReactNode

Optional trailing ReactNode. InlineBanner.Action supplies the shared banner action preset and inherits the resolved banner color; arbitrary controls are also accepted.

ReactNode

Caller-provided content. Standard plain strings truncate with a focusable tooltip; rich nodes render directly. Compact content wraps.

string

Class merged onto the root div or composed element.

"blue" | "gray" | "green" | "orange" | "red"

implicit:"status palette"

Gray, blue, green, orange or red palette override. An omitted color follows status.

boolean

implicit:"false"

Removes the standard bottom margin. Compact layouts have no bottom margin.

boolean

implicit:"false"

Fills the available parent width, including padding and borders, and removes the compact layout’s 512px maximum. Defaults to false; standard layout already fills its parent.

ReactNode

implicit:"decorative information icon"

Leading ReactNode. Defaults to a decorative information icon. Pass null to omit it.

"compact" | "standard"

implicit:"standard"

Standard full-width layout or compact wrapping layout with a 512px maximum content width. Defaults to standard.

Ref<HTMLDivElement>

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

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, BannerState>

Base UI root element or render callback, receiving native props/ref and resolved Banner state.

"error" | "info" | "neutral" | "success" | "warning"

implicit:"info"

Feedback meaning: neutral, info, success, warning or error. Defaults to info. Roles and announcements remain caller-owned.

CSSProperties

Inline styles applied to the root div or composed element.

"soft" | "solid"

implicit:"soft"

Solid or soft appearance, independently of status and layout. Defaults to soft.

InlineBanner.Action

string | ((state: ButtonState) => string | undefined)

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

boolean

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

ReactNode

Decorative content displayed after the label.

boolean

implicit:"false"

Whether the button should be focusable when disabled.

boolean

Expands the button to fill its container width.

string

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

boolean

Shows a loading indicator and disables activation.

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

boolean

implicit:"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.

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.

AriaRole

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

ShortcutDefinition

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

string

Localized text between sequence steps. Defaults to then.

ReactNode

Decorative content displayed before the label.

CSSProperties | ((state: ButtonState) => CSSProperties | undefined)

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

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Migrare

Proprietăți

InlineBanner.Action

​Prezentare generală

​Utilizare

​Migrare

​Proprietăți

​InlineBanner.Action

Prezentare generală

Utilizare

Migrare

Proprietăți

InlineBanner.Action