---
name: Shortcut
package: '@wordpress/components'
category: '@wordpress-components'
status: stable
canonical: 'https://system.automattic.design/components/shortcut/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-shortcut--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/shortcut'
---

# Shortcut

Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.

```tsx
import { Shortcut } from '@wordpress/components';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | Classname to apply to the shortcut. |
| `shortcut` | `string \| { display: string; ariaLabel: string; } \| undefined` | — | Shortcut configuration |


## Examples

### Default

```tsx
const Default = ( props ) => {
	return <Shortcut shortcut="Ctrl + S" { ...props } />;
};
```

### With Aria Label

```tsx
const WithAriaLabel = ( props ) => {
	return <Shortcut shortcut="Ctrl + S" { ...props } />;
};
```