Info

Info displays a message with a blue or danger accent. Supply buttonTitle with onClick for an action, or with href for a link. When both are supplied, href takes precedence.

import { Info } from 'twenty-ui/components';

export const ConnectionInfo = ({ onConnect }: { onConnect: () => void }) => (
  <Info
    text="Connect your account to sync contacts."
    buttonTitle="Connect account"
    onClick={onConnect}
  />
);

Use accent="danger" for an error. render customizes the link action when href is supplied. The message has no automatic dismissal or announcement behavior.

Props

"blue" | "danger"

default:"blue"

Information or danger styling.

string

Visible label for the optional action. Requires href or onClick.

string

Action destination. Takes precedence over onClick.

((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)

Action callback when href is absent.

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

Custom render element for the link action, forwarded to Button when href is supplied.

string

required

Message displayed beside the information icon.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props