> For the complete documentation index, see [llms.txt](https://bctc.gitbook.io/vant-react-official-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bctc.gitbook.io/vant-react-official-docs/cell.md).

# Cell

### [Demo](https://vant.bctc.io/?path=/story/cell--basic-usage)

#### Install

```
import React from 'react';
import { Cell } from 'vant-react';
```

## Usage

#### Basic Usage

```
<Cell
      title={{ text: 'Title', fontSize: '14px' }}
      content={{ text: 'Content', fontSize: '12px' }}
    />
<Cell
      title={{ text: 'Title', fontSize: '14px' }}
      content={{ text: 'Content', fontSize: '12px' }}
      description={{ text: 'description', fontSize: '12px' }}
    />
```

#### Cell Icon

```
<Cell titleIcon={{ name: 'location-o', size: '12px' }}
      title={{ text: 'Title', fontSize: '14px' }}
      contentIcon={{ name: 'arrow', size: '12px' }}
      content={{ text: 'Content', fontSize: '12px' }} 
    />
```

#### Cell Tag

```
<Cell
      title={{ text: 'Title', fontSize: '14px' }}
      Tag={<Tag type='danger' text='Tag' />}
      content={{ text: 'Content', fontSize: '12px' }}
    />
```

#### Round Cell

```
<Cell title={{ text: 'Title', fontSize: '14px' }} round />
```

#### Value Only

```
<Cell title={{ text: 'Title', fontSize: '14px' }} round />
```

#### URL

```
<Cell
      title={{ text: 'URL', fontSize: '14px' }}
      url='www.google.com'
      replace
    />
```

#### Action

```
<Cell
      title={{ text: 'Click', fontSize: '14px' }}
      click={(e) => {
        alert(e);
      }}
    />
```

## API

#### Props

| Attribute     | Description                 | Type                                                                           | Default | Required   |
| ------------- | --------------------------- | ------------------------------------------------------------------------------ | ------- | ---------- |
| `title`       | Cell title                  | ***object***                                                                   | -       | *optional* |
| `titleIcon`   | Left side icon name         | ***object***                                                                   | ***-*** | *optional* |
| `content`     | Cell content                | ***object***                                                                   | -       | *optional* |
| `contentIcon` | Right side icon name        | ***object***                                                                   | -       | *optional* |
| `description` | Cell description            | ***object***                                                                   | -       | *optional* |
| `Tag`         | Cell tag                    | <p><em><strong>React</strong></em></p><p><em><strong>Element</strong></em></p> | -       | *optional* |
| `url`         | Link URL                    | ***string***                                                                   | -       | *optional* |
| `replace`     | Whether open in current tab | ***boolean***                                                                  | -       | *optional* |
| `round`       | Whether to be round button  | ***boolean***                                                                  | -       | *optional* |

#### Event

| Event   | Description                                           | Arguments      |
| ------- | ----------------------------------------------------- | -------------- |
| `click` | Triggered when click cell and not disabled or loading | *event: Event* |