Installation
import { Paragraph } from "@octopusdeploy/design-system-components"
Do not use a div for paragraph text
Do not use a <div> solely to avoid the default margins applied to a <p> element.
// Avoid
<div>Deployment targets that are unavailable will be skipped.</div>
A div does not communicate that its content is a paragraph. Use Paragraph to preserve the correct HTML semantics while avoiding unwanted default margins.
// Prefer
<Paragraph>
Deployment targets that are unavailable will be skipped.
</Paragraph>
Spacing
The Paragraph component has no external margin.
Do not rely on the component to create spacing between content. Use the parent layout component or the design system’s spacing utilities like Stack to control the distance between elements.
<Stack direction="vertical" gap="medium">
<Paragraph>First paragraph.</Paragraph>
<Paragraph>Second paragraph.</Paragraph>
</Stack>
Text colour
Use the color prop to select one of the supported text colour tokens. If you want to add support for a new text colour please reach out in #topic-frontend.
Primary
Primary is the default colour and should be used for most body text.
<Paragraph color="primary"> This is primary body text.</Paragraph>
Secondary
Use secondary text for supporting information that is less prominent than the surrounding primary content. Do not use secondary text for information that is essential to understanding the page or completing a task.
<Paragraph color="secondary">Changes may take a few minutes to appear.</Paragraph>
Agent guidance
- Use Paragraph for text that forms a semantic paragraph.
- Prefer Paragraph over a <div> used only to remove paragraph margins.
- Do not recreate this component by applying margin: 0 to individual <p> elements.
- Use color="primary" for standard body text.
- Use color="secondary" only for supporting or lower-emphasis text.
- Do not apply custom text colours when a supported colour prop meets the requirement.
- Control spacing through the parent layout rather than adding margins to Paragraph.
- Do not use Paragraph as a layout wrapper or generic container.