Skip to content

Commit

Permalink
feat(docs): update the docs with customCopyAriaLabel prop
Browse files Browse the repository at this point in the history
  • Loading branch information
weronikaolejniczak committed Nov 22, 2024
1 parent b871a87 commit cfe6e8f
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions packages/website/docs/components/editors_and_syntax/code.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,24 @@ export default () => (

```

You can specify a custom aria label for the Copy button using the `customCopyAriaLabel` prop. It works in conjunction with the `isCopyable` prop. The default aria-label is "Copy".

```tsx interactive
import React from 'react';
import { EuiCodeBlock } from '@elastic/eui';

const htmlCode = `<!-- I'm an example of HTML -->
<h1>Hello world!</h1>
<p>Lorem ipsum dolor sit amet.</p>`;

export default () => (
<EuiCodeBlock language="html" isCopyable customCopyAriaLabel="Copy the code">
{htmlCode}
</EuiCodeBlock>
);

```

For long content, you can set an `overflowHeight` which will scroll if the text exceeds that height, and allows users to view the code in fullscreen mode.

```tsx interactive
Expand Down

0 comments on commit cfe6e8f

Please sign in to comment.