# AsideHeader

> `AsideHeader` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

Source: https://ui.jcsoftdev.com/docs/components/aside-header

`AsideHeader` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

## Import

```ts
import { AsideHeader } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/aside`.

## Usage

```tsx
<AsideHeader>
  <>
          <AsideHeader title="Pending" action={<a href="#all">View all</a>} />
          <Note>Nothing pending.</Note>
        </>
</AsideHeader>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `ReactNode` |  |  |
| `action` | `ReactNode` |  | End slot, usually a link. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-aside--default)
- [Custom Label](/storybook/?path=/story/containers-aside--custom-label)
- [Spanish](/storybook/?path=/story/containers-aside--spanish)

## Source

`packages/ui/src/containers/aside/aside.tsx`