> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Widget.TextWidget />

> Text widget that can be shown on a record page.

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/2EyaTyByKNPeSVcd/images/text-widget.png?fit=max&auto=format&n=2EyaTyByKNPeSVcd&q=85&s=905d99548719a1fe3fa5ed50327194c4" data-path="images/text-widget.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/2EyaTyByKNPeSVcd/images/text-widget-dark.png?fit=max&auto=format&n=2EyaTyByKNPeSVcd&q=85&s=effd70a15c784e18ba183266c5b0dc5a" data-path="images/text-widget-dark.png" />

```js theme={"system"}
import {Widget} from "attio/client"
```

## Example

```jsx theme={"system"}
<Widget.TextWidget
  onTrigger={() => {
    // do something
  }}
>
  <Widget.Title>Title</Widget.Title>
  <Widget.Text.Primary>Main text</Widget.Text.Primary>
  <Widget.Text.Secondary>Description text</Widget.Text.Secondary>
  <Widget.Decoration>
    <Badge color="blue">42</Badge>
  </Widget.Decoration>
</Widget.TextWidget>
```

## Props

<ParamField path="onTrigger" type="() => void">
  An optional function that will be called when a user clicks on the widget.
</ParamField>

<ParamField path="children" type="React.ReactNode" required>
  A text widget can have – at least one – of the following children:

  * [`Widget.Title`](./title)
  * [`Widget.Text.Primary`](./text-primary)
  * [`Widget.Text.Secondary`](./text-secondary)
  * [`Widget.Loading`](./loading)
  * [`Widget.Decoration`](./decoration)

  Not all of them are required.

  <Info>
    If you do not provide a `<Widget.Title />` your app's name will be used.
  </Info>

  <Note>At least one text component is required for the badge to be displayed.</Note>
</ParamField>