Email

This field is used to display email values. It uses the <Link> component of <Typography> from Ant Design.

Swizzle

You can swizzle this component to customize it with the refine CLI

Usage

Let's see how we can use <EmailField> with the example in the user list:

localhost:3000

import {
    List,
    useTable,
    EmailField,
} from "@refinedev/antd";
import { Table } from "antd";

const UserList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    return (
        <List>
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column
                    dataIndex="email"
                    title="Email"
                    render={(value: string) => <EmailField value={value} />}
                    width="100%"
                />
                ...
            </Table>
        </List>
    );
};

interface IPost {
    id: number;
    email: string;
}

TIP

<EmailField> uses "mailto:" in the href prop of the <Link> component. For this reason, clicking <EmailField> opens your device's default mail application.

API Reference

External Props

This field also accepts all props of Ant Design's Link component.

For more information, refer to the documentation for the rest of Link properties →

Usage​

API Reference​

Usage

API Reference