---
title: Initials
description: 'Initials renders a given name with initials.'
type: typography
slug: /components/initials/
keywords: ['initials', 'text', 'user', 'name']
---

# Initials

`Initials` renders a given name with initials.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/typography/initials.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

```jsx live
import { Initials } from '@wp-g2/components';

function Example() {
	return <Initials name="Elsa Oldenburg" />;
}
```

## Props

##### adjustLineHeightForInnerControls

**Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"`

Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).

##### align

**Type**: `CSS['textAlign']`

Adjusts the text alignment.

##### color

**Type**: `CSS['color']`

Adjusts the text color.

##### display

**Type**: `CSS['display']`

Adjusts the CSS display.

##### ellipsis

**Type**: `string`

The ellipsis string when `truncate` is set.

##### ellipsizeMode

**Type**: `"auto"`,`"head"`,`"tail"`,`"middle"`

Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set `ellipsizeMode` to `middle` and a text `limit`.

-   `auto`: Trims content at the end automatically without a `limit`.
-   `head`: Trims content at the beginning. Requires a `limit`.
-   `middle`: Trims content in the middle. Requires a `limit`.
-   `tail`: Trims content at the end. Requires a `limit`.

##### highlightCaseSensitive

**Type**: `boolean`

Escape characters in `highlightWords` which are meaningful in regular expressions.

##### highlightEscape

**Type**: `boolean`

Determines if `highlightWords` should be case sensitive.

##### highlightSanitize

**Type**: `boolean`

Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.

##### highlightWords

**Type**: `any[]`

Letters or words within `Text` can be highlighted using `highlightWords`.

##### isBlock

**Type**: `boolean`

Sets `Text` to have `display: block`.

##### isDestructive

**Type**: `boolean`

Renders a destructive color.

##### limit

**Type**: `number`

Determines the max characters when `truncate` is set.

##### lineHeight

**Type**: `CSS['lineHeight']`

Adjusts all text line-height based on the typography system.

##### name

**Type**: `string`

The name to render as initials.

##### numberOfLines

**Type**: `number`

Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end.

##### optimizeReadabilityFor

**Type**: `CSS['color']`

The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...).

##### size

**Type**: `CSS['fontSize']`,`TextSize`

Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`.

##### truncate

**Type**: `boolean`

Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.

##### upperCase

**Type**: `boolean`

Uppercases the text content.

##### variant

**Type**: `"muted"`

Adjusts style variation of the text.

##### weight

**Type**: `CSS['fontWeight']`,`TextWeight`

Adjusts font-weight of the text.

<!-- /Automatically Generated -->
<!-- /props -->

`Initials` uses `Text` underneath, so we have access to all of `Text`'s props. For a complete list of props, check out [`Text`](../text/#props).

## See Also

-   [Text](../text/)