# Monogram

## Examples


### Basic

A Monogram can show one to three characters. You can use the getInitials helper to shorten a name.

```typescript
import React from 'react';

import Monogram, { getInitials } from '@splunk/react-ui/Monogram';


export default function Basic() {
    return (
        <>
            <Monogram initials="A" />
            <Monogram initials="AE" />
            <Monogram initials="AME" />
            <Monogram initials={getInitials('Amelia')} />
            <Monogram initials={getInitials('Amelia Earhart')} />
            <Monogram initials={getInitials('Amelia Mary Earhart')} />
        </>
    );
}
```



### Custom background color

```typescript
import React from 'react';

import Monogram from '@splunk/react-ui/Monogram';


export default function BackgroundCustom() {
    return (
        <>
            <Monogram backgroundColor="cornflowerblue" initials="A" />
            <Monogram backgroundColor="#888" initials="AE" />
            <Monogram backgroundColor="rgb(170, 100, 120)" initials="AME" />
        </>
    );
}
```



### Interactive

A click handler can be added to enable interactivity.

```typescript
import React from 'react';

import Monogram from '@splunk/react-ui/Monogram';


export default function Interactive() {
    return (
        <>
            <Monogram initials="A" onClick={() => {}} />
            <Monogram initials="AE" onClick={() => {}} />
            <Monogram initials="AME" onClick={() => {}} />
        </>
    );
}
```



### Size

Monograms can be one of three standard sizes: "small", "medium" (default), "large", or "xlarge" (deprecated). The size prop can also be a number if the standard size does not fit your use case. Note: using a non-standard size may have unexpected layouts when combined with other components.

```typescript
import React from 'react';

import Monogram from '@splunk/react-ui/Monogram';


export default function Size() {
    return (
        <>
            <div>
                <Monogram initials="A" size="small" />
                <Monogram initials="AE" size="small" />
                <Monogram initials="AME" size="small" />
            </div>
            <div style={{ marginTop: '10px' }}>
                <Monogram initials="A" size="medium" />
                <Monogram initials="AE" size="medium" />
                <Monogram initials="AME" size="medium" />
            </div>
            <div style={{ marginTop: '10px' }}>
                <Monogram initials="A" size="large" />
                <Monogram initials="AE" size="large" />
                <Monogram initials="AME" size="large" />
            </div>
        </>
    );
}
```



### Auto background color

The background color is derived from the initials prop if the backgroundColor prop is set to "auto". We do not recommend using "auto" background color because the existing built-in background color set might lead to color contrast issues. Please use a custom background color and ensure that it has sufficient color contrast with the initial&apos;s text color.

```typescript
import React from 'react';

import Monogram from '@splunk/react-ui/Monogram';


export default function BackgroundAuto() {
    return (
        <>
            <Monogram backgroundColor="auto" initials="A" />
            <Monogram backgroundColor="auto" initials="AE" />
            <Monogram backgroundColor="auto" initials="AME" />
        </>
    );
}
```




## API

import React from 'react';

import ComponentAPI from '@splunk/react-docs/ComponentAPI';
import UtilAPI from '@splunk/react-docs/UtilAPI';
import Heading from '@splunk/react-ui/Heading';

import utilDocs from '!!@splunk/jsdoc-loader!@splunk/react-ui/Monogram/Monogram';
import allDocs from '@splunk/react-ui/Monogram/Monogram?parseDocs';

const docs = allDocs.find((doc) => doc.displayName === 'Monogram');

function DevelopSection() {
    return [
        <ComponentAPI title="Monogram" key="component" docs={docs} />,
        <Heading level={4} key="utilsHeading">
            Utils
        </Heading>,
        <UtilAPI title="Monogram2" key="utils" docs={utilDocs} />,
    ];
}
export default DevelopSection;