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

# Info

> An inline information message with an optional button or link.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

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

```tsx theme={null}
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.

<StoryEmbed storyId="ui-feedback-info--default" title="Info example" height={280} />

## Props

<ParamField body="accent" type="&#x22;blue&#x22; | &#x22;danger&#x22;" default="blue">
  Information or danger styling.
</ParamField>

<ParamField body="buttonTitle" type="string">
  Visible label for the optional action. Requires href or onClick.
</ParamField>

<ParamField body="href" type="string">
  Action destination. Takes precedence over onClick.
</ParamField>

<ParamField body="onClick" type="((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)">
  Action callback when href is absent.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>">
  Custom render element for the link action, forwarded to Button when href is supplied.
</ParamField>

<ParamField body="text" type="string" required>
  Message displayed beside the information icon.
</ParamField>