# MediaStyleOptionDefinition

interface

The definition of a single media style option used by the [media embed style](module_media-embed_mediaembedstyle-MediaEmbedStyle.md) feature.

To customize a built-in style, re-declare it with the same `name` — only the fields you set will be replaced; the rest are inherited from the built-in. To register a brand-new style, provide a fresh `name` and a complete definition (`title`, `icon`, and — unless `isDefault: true` — `className`).

```typescript
import sideIcon from 'path/to/icon.svg';

const sideStyle = {
	name: 'side',
	title: 'Side media',
	icon: sideIcon,
	className: 'media-style-side'
};
```

Each option registers a toggle button under the name `'mediaEmbed:{name}'` in the [UI component factory](module_ui_componentfactory-ComponentFactory.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L419)

<a id="properties">

## Properties

<a id="member-className">

### `className?: string`

The CSS class added to the view `<figure>` when this style is applied. Required for every non-default style — default styles are encoded as the absence of the `mediaStyle` attribute, so they intentionally have no class.

Inherited from the built-in style with the matching `name` when not set.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L457)

<a id="member-icon">

### `icon?: string`

The button icon. Either an SVG XML source string, or one of the keys in `DEFAULT_ICONS` (`'inlineLeft'`, `'left'`, `'center'`, `'right'`, `'inlineRight'`) to use one of the icons shipped with the plugin.

Required when defining a custom style. Inherited from the built-in style with the matching `name` when overriding a built-in.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L448)

<a id="member-isDefault">

### `isDefault?: boolean`

When `true`, this style is the default state — applying it removes the `mediaStyle` attribute from the model element (no class is written to the view). Default styles must not define a `className`.

Inherited from the built-in style with the matching `name` when not set.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L466)

<a id="member-name">

### `name: string`

The unique style name. It is used to:

* reference a built-in style or define a custom one,
* store the chosen style in the model as the `mediaStyle` attribute,
* register the toolbar button under `'mediaEmbed:{name}'`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L428)

<a id="member-title">

### `title?: string`

The button title. The title is wrapped in `editor.t()` at button creation, so titles that match keys in the official translation set will be localized automatically.

Required when defining a custom style. Inherited from the built-in style with the matching `name` when overriding a built-in.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-media-embed/src/mediaembedconfig.ts#L438)

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)