no-html-elements - HubSpot docs

The no-html-elements rule disallows usage of standard HTML elements (<div>, <span>, <button>, etc.) in UI extensions.

Rule details

UI extensions only support components provided by the @hubspot/ui-extensions package. Standard HTML elements are not supported in the UI extensions runtime environment and will fail to render. This rule detects and reports usage of any standard HTML elements in your extension code. Note that other third-party React component libraries are also not supported in UI extensions, though they are not currently linted by this rule.

HTML element alternatives

Use the following UI extension components instead of standard HTML elements:

HTML Element	UI Extension Component
`<div>`	`<Box>`
`<p>`	`<Text>`
`<span>`	`<Text inline>`
`<h1>` - `<h6>`	`<Heading>`
`<button>`	`<Button>`
`<input>`	`<Input>`, `<NumberInput>`, `<DateInput>`, etc.
`<img>`	`<Image>`
`<a>`	`<Link>`
`<ul>`, `<ol>`, `<li>`	`<List>`
`<table>`, `<tr>`, `<td>`	`<Table>`, `<TableRow>`, `<TableCell>`

For a complete list of available components, refer to the UI component documentation.

Examples

Container elements

Instead of using <div>, <p>, or <span>:

// Incorrect
function App() {
  return <div>Hello World</div>;
}

Use <Box>:

import { Box } from '@hubspot/ui-extensions';

function App() {
  return <Box>Hello World</Box>;
}

Text and heading elements

Instead of using <h1>, <p>, or other text elements:

// Incorrect
function App() {
  return (
    <div>
      <h1>My Title</h1>
      <p>Some text content</p>
    </div>
  );
}

Use <Heading> and <Text>:

import { Box, Heading, Text } from '@hubspot/ui-extensions';

function App() {
  return (
    <Box>
      <Heading>My Title</Heading>
      <Text>Some text content</Text>
    </Box>
  );
}

Interactive elements

Instead of using <button>:

// Incorrect
function App() {
  return <button onClick={() => alert('clicked')}>Click me</button>;
}

Use <Button>:

import { Button } from '@hubspot/ui-extensions';

const Extension = ({ actions }) => {
  return (
    <Button onClick={() => actions.addAlert({ type: 'success', message: 'Clicked!' })}>
      Click me
    </Button>
  );
};

hubspot.extend(({ actions }) => <Extension actions={actions} />);

Media elements

Instead of using <img>:

// Incorrect
function App() {
  return <img src="logo.png" alt="Logo" />;
}

Use <Image>:

import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="logo.png" alt="Logo" />;
}

​Rule details

​HTML element alternatives

​Examples

​Container elements

​Text and heading elements

​Interactive elements

​Media elements

​Related resources