# Mobile Tab Bar

> Phone chrome: MobileTabBar (bottom navigation) and PushNotification (how an approval arrives on the lock screen).

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/MobileTabBar/)

Phone chrome: `MobileTabBar` (bottom navigation) and `PushNotification` (how an approval arrives on the lock screen).

MobileTabBar: `items` ({id, label, icon, count}), `active`, `onPick`, `label`.
PushNotification: `app`, `time`, `title`, `text`, `actions` ({label, onClick}). Only A can be answered from the notification; B–D open the app.

## Example

```tsx
import * as React from "react";
import { MobileTabBar, PushNotification } from "@twentyfirstmedia/pro";

function App() {
  const a = React.useState("approvals");
  return (
    <div
      className="tf-col"
      style={{
        gap: 16,
        alignItems: "center",
      }}
    >
      <PushNotification
        app="Halo"
        time="now"
        title="Approval needed · Atlas"
        text="Send this email to ida@northwind.io?"
        actions={[
          {
            label: "A · Run it",
          },
          {
            label: "Open",
          },
        ]}
      />
      <div
        style={{
          width: 390,
          boxSizing: "border-box",
          maxWidth: "100%",
        }}
      >
        <MobileTabBar
          active={a[0]}
          onPick={a[1]}
          items={[
            {
              id: "home",
              label: "Home",
              icon: "home",
            },
            {
              id: "approvals",
              label: "Approvals",
              icon: "check",
              count: 3,
            },
            {
              id: "mail",
              label: "Mail",
              icon: "mail",
            },
            {
              id: "more",
              label: "More",
              icon: "menu",
            },
          ]}
        />
      </div>
    </div>
  );
}
export default App;
```

## Props

### MobileTabBar

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `{ id: string; label: string; icon: IconName; count?: number }[]` | Required |
| `active?` | `string` |  |
| `onPick?` | `(id: string) => void` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### PushNotification

| Prop | Type | Notes |
| --- | --- | --- |
| `app?` | `string` |  |
| `time?` | `string` |  |
| `title` | `string` | Required |
| `text?` | `ReactNode` |  |
| `actions?` | `{ label: string; onClick?: () => void }[]` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |