
# Naming conventions of types

You can import some types that we provide to our components like so:
```tsx
import type { ButtonProps } from '@kinsta/stratus'
```


We usually name the types by giving it the name of the component and one of the following suffixes: <code>Props</code>, <code>Interface</code> or <code>Component</code>. This gives us names like <code>ButtonProps</code>, <code>NotePanelInterface</code>.

*Sometimes components don't have all of these types. Please take a look at the components' docs and if you find that there's something you need that we don't provide let the stratus team know about it.*

***

<code>...Props</code> suffix:

Props that are implemented and processed by Stratus.
This may include some HTML element props such as <code>onClick</code> and <code>style</code>.
If you see these props there, we might be changing its behaviour inside the Stratus component, so take a look at the specific documentation of the prop itself on the component's documentation page.

Example:
```tsx
 interface RadioCardProps {
  isChecked?: boolean
  isInFocus?: boolean
  isInGroup?: boolean
  value?: string
  ctaButton?: CtaButtonType | null
  onChange?: (value?: string) => void
  isDisabled?: boolean
}
```

***

<code>...Interface</code> suffix:

The <code>...Props</code> type extended by default HTMLElement types such as style, class etc. Inaccessible HTMLElement types are omitted.

Example:
```tsx
interface RadioCardInterface
  extends RadioCardProps,
    Omit<Omit<InputHTMLAttributes<HTMLDivElement>, 'value'>, 'onChange'> {}
```
***

<code>...Component</code> suffix:

The <code>...Interface</code> extended by JSX.Element type

```tsx
ForwardRefExoticComponent<...Props/...Interface & RefAttributes<HTML...Element>>
```

```tsx
ComponentType<...Props/...Interface>
```

```tsx
(props: ...Props/...Interface) => JSX.Element
```

Example for <code>RadioCard</code> that has a <code>Content</code> subcomponent:
```tsx
export type RadioCardComponent = ComponentType<RadioCardInterface> & {
  Content: ComponentType<RadioCardContentProps>
}
```

***

There are other types as well, such as <code>ButtonTypes</code> and <code>IconName</code>, which indicate what values can be given to the <code>Button</code>'s props.
To be sure that you don't miss these, consult the specific component's documentation and if you see anything missing, please let the stratus team know!
```tsx
type ButtonTypes = 'primary' | 'secondary' | 'tertiary' | 'danger'
type IconName = keyof typeof icons

interface ButtonProps {
  type?: ButtonTypes
  icon?: IconName
  ...
}
```

If you're developing Stratus and you'd like more information on how we use types, visit the [developer guide on types](/docs/developer-guide/going-deeper/types)