Pluma

Theme

About

MCP Server

Getting started

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

Emphasis

Github

Storybook

Legacy component

Marks text that has stress emphasis.

Importing

The component can be imported via:

import { Emphasis } from '@customerio/pluma-components/react';

Usage

The component renders an <em> tag with an italic style.

It must be used in another typography component, like Text or Paragraph.

Important: This action cannot be undone.

<Paragraph>
  <Emphasis>Important:</Emphasis> This action cannot be undone.
</Paragraph>

API

`PlumaEmphasis` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

Default:inherit

The text color. _{^{(See text color tokens)}}

`family` `"mono" | "sans" | undefined`

The font family. _{^{(See font family tokens)}}

`fontStyle` `"italic" | "normal" | undefined`

Default:italic

The font style. _{^{(See MDN font-style)}}

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

The text size. _{^{(See font size tokens)}}

`text` `"product-code" | "product-h1" | "product-h2" | "product-h3" | "product-h4" | "product-label" | "product-label-secondary" | "product-link" | "product-link-secondary" | "product-p" | "product-p-active" | "product-p-secondary" | "product-ps" | "product-ps-active" | "product-pxs" | "product-pxs-active" | "product-pxs-secondary" | undefined`

A predefined typography style. _{^{(See text tokens)}}

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

The font weight. _{^{(See font weight tokens)}}

Emphasis

Importing

Usage

API

PlumaEmphasis extends Text

color "critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined

family "mono" | "sans" | undefined

fontStyle "italic" | "normal" | undefined

size "button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined

weight "bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined

On this page

`PlumaEmphasis` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

`family` `"mono" | "sans" | undefined`

`fontStyle` `"italic" | "normal" | undefined`

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`