Resumen
InlineBanner combina Banner con un diseño en línea redondeado y un icono decorativo de información. Comparte los contratos independientes de Banner para status, variant, color, icon y action. Su apariencia predeterminada es soft y su estado predeterminado es info.
”Uso”
standard ocupa el ancho disponible. Los elementos secundarios de cadenas simples se truncan; el foco del teclado, al pasar el puntero o al tocar se muestra la cadena completa en una descripción emergente. Los elementos secundarios de nodos enriquecidos se representan directamente, por lo que los enlaces y controles insertados conservan su propia semántica. Componga una tipografía explícita cuando el contenido enriquecido necesite truncamiento.
Use layout="compact" para contenido con ajuste de línea, espaciado más reducido y un ancho máximo de contenido de 512px. Agrega fullWidth para eliminar ese límite y ocupar el ancho disponible del elemento padre, incluidos el relleno y los bordes. De forma predeterminada, es false y no cambia el diseño estándar, que ya ocupa todo su elemento padre. No tiene margen inferior. El diseño es independiente de la apariencia solid o soft. embedded elimina el margen inferior del diseño estándar.
InlineBanner.Action proporciona un botón pequeño con contorno que hereda el color mostrado del banner, incluidas las anulaciones explícitas de la paleta y las apariencias sólidas. Admite interacciones de Button, enlaces, refs y representación personalizada. La ranura action también acepta controles arbitrarios.
El destino raíz es un div. Las props nativas, className, style y ref se dirigen a esa raíz; render de Base UI puede componer otro elemento y recibe el estado resuelto de Banner. action acepta cualquier ReactNode, incluidos varios controles con sus API completas de Button o enlace. icon={null} elimina el icono predeterminado.
Quien llama controla si se representa el banner y si se deben anunciar los cambios. Proporcione role="status" y aria-live="polite", o un contenedor de región activa adecuado, cuando sea necesario. Status no asigna semántica de región activa. Asigne nombres a los controles de acción y marque los iconos personalizados decorativos con aria-hidden.
Migración
Reemplacemessage por children, LeftIcon={Icon} por icon={<Icon />} y la configuración de button por un nodo action. Use InlineBanner.Action para mantener el estilo de la acción alineado con el banner. Reemplace variant="compact" por layout="compact"; estándar es ahora el diseño predeterminado. Use status="error" para indicar un error o color="red" para una anulación de la paleta.
”Props”
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"
predeterminado:"status palette"
Gray, blue, green, orange or red palette override. An omitted color follows status.
boolean
predeterminado:"false"
Removes the standard bottom margin. Compact layouts have no bottom margin.
boolean
predeterminado:"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
predeterminado:"decorative information icon"
Leading ReactNode. Defaults to a decorative information icon. Pass null to omit it.
"compact" | "standard"
predeterminado:"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"
predeterminado:"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"
predeterminado:"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
predeterminado:"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
predeterminado:"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.