import { Meta } from '@storybook/addon-docs';

<Meta
	title="Guides/Extending the Backoffice/Registration/Types/Kind"
	parameters={{ previewTabs: { canvas: { hidden: true } } }}
/>

# Kind Manifest Type

A kind extension provides the preset for other extensions to use.

A kind is matched with a specific type, when another extension using that type and kind it will inherit the perset manifest of the kind.

The registration of Kinds, is done in the same maner as the registration of other extensions.
But the format of it is quite different, lets look at the Kind registration of the Header App Button Kind (The kind used in the above example):

## Kind example

In the following example a kind is registred. This kind provides a default element for extensions utilizing this kind.

```ts
import { extensionRegistry } from '@umbraco-cms/extension-registry';

const manifest: ManifestKind = {
	type: 'kind',
	alias: 'Umb.Kind.MyButtonKind',
	matchType: 'headerApp',
	matchKind: 'button',
	manifest: {
		elementName: 'umb-header-app-button',
	},
};

umbExtensionsRegistry.register(manifest);
```

This eanbles other extensions to use this kind, and inherit the manifest properties defined in the kind.

In this example a Header App is registered without defining a element, this is posible because the resgistration inherits the elementName from the kind.

```ts
import { extensionRegistry } from '@umbraco-cms/extension-registry';

const manifest = {
	type: 'headerApp',
	kind: 'button',
	name: 'My Header App Example',
	alias: 'My.HeaderApp.Example',
	meta: {
		label: 'My Example',
		icon: 'icon-home',
		href: '/some/path/to/open/when/clicked',
	},
};

extensionRegistry.register(extension);
```

## Understanding the Kind extension

The root properties of this object, defines the Kind registration.
And then the manifest property holds the preset for the extension using this kind to be based upon.
This object can hold the property values that makes sense for the Kind.

```ts
...

const manifest: ManifestKind = {
	type: 'kind',
	alias: 'Umb.Kind.MyButtonKind',
	matchType: 'headerApp',
	matchKind: 'button',
	manifest: {
		...
	},
};

...
```

For the kind to be used, it needs to match up with the registration of the extension using it.
This happons when the extension uses a type, which matches the value of `matchType` of the Kind.
As well the extension has to utilize that kind, by setting the value of `kind` to the value of `matchKind` of the Kind.

```ts
...

const manifest = {
	type: 'headerApp',
	kind: 'button',
	...
};

...
```
