{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a1",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a2",
   "metadata": {},
   "source": [
    "The `Badge` generates a small badge to the top-right (by default) of its child element. Badges are commonly used to display notification counts, status indicators, or short labels overlaid on icons, avatars, or buttons.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`content`** (int or str): The content rendered within the badge. Typically an integer count but can be a short string. Default is 0.\n",
    "* **`max`** (int): Maximum count to display. Values above this show as 'max+' (e.g. '99+'). Default is 99.\n",
    "* **`object`** (Viewable): The child component to wrap with the badge.\n",
    "* **`show_zero`** (bool): Whether to display the badge when content is zero. Default is False.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`color`** (str): The color of the badge, which must be one of `'primary'`, `'secondary'`, `'default'`, `'error'`, `'info'`, `'success'`, or `'warning'`.\n",
    "* **`offset`** (tuple): The (x, y) pixel offset of the badge from its anchor point on the object. Positive x shifts the badge right, positive y down.\n",
    "* **`overlap`** (str): Wrapped shape the badge should overlap - either 'rectangular' (default) or 'circular'.\n",
    "* **`placement`** (str): The placement of the badge relative to the child element - options are 'top-right' (default), 'top-left', 'bottom-right', and 'bottom-left'.\n",
    "* **`variant`** (str): The variant of the badge - either 'standard' (default) or 'dot' for a small dot indicator without content.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API for advanced customization\n",
    "- **`theme_config`** (dict): Theming API for consistent design system integration\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b1",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "Apply a badge to a child component:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b2",
   "metadata": {},
   "outputs": [],
   "source": "pmui.Badge(pmui.IconButton(icon=\"mail\"), content=4, color=\"primary\")"
  },
  {
   "cell_type": "markdown",
   "id": "c1",
   "metadata": {},
   "source": [
    "### Color\n",
    "\n",
    "Use the `color` parameter to apply different theme colors:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c2",
   "metadata": {},
   "outputs": [],
   "source": "pmui.Row(\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=4, color=\"primary\"),\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=4, color=\"secondary\"),\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=4, color=\"success\"),\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=4, color=\"error\"),\n)"
  },
  {
   "cell_type": "markdown",
   "id": "d1",
   "metadata": {},
   "source": [
    "### Maximum Value\n",
    "\n",
    "Use the `max` parameter to cap the displayed value:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d2",
   "metadata": {},
   "outputs": [],
   "source": "pmui.Row(\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=99, color=\"secondary\"),\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=100, color=\"secondary\"),\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=1000, max=999, color=\"secondary\"),\n)"
  },
  {
   "cell_type": "markdown",
   "id": "e1",
   "metadata": {},
   "source": [
    "### Dot Badge\n",
    "\n",
    "The `dot` variant renders a small dot instead of a count:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e2",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Badge(pmui.IconButton(icon=\"mail\"), variant=\"dot\", color=\"secondary\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f1",
   "metadata": {},
   "source": "### Show Zero\n\nThe badge auto-hides when `content` is zero. Override this with `show_zero`:"
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f2",
   "metadata": {},
   "outputs": [],
   "source": "pmui.Row(\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=0, color=\"secondary\"),\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=0, show_zero=True, color=\"secondary\"),\n)"
  },
  {
   "cell_type": "markdown",
   "id": "cdfeada5",
   "metadata": {},
   "source": "Note, `visible` hides the entire pane, so set `content=0` and `show_zero=False` to hide the badge but show the pane."
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "21d175a7",
   "metadata": {},
   "outputs": [],
   "source": "pmui.Row(\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), visible=False, color=\"secondary\"),  # hidden\n    pmui.Badge(pmui.IconButton(icon=\"mail\"), content=0, show_zero=False, color=\"secondary\")\n)"
  },
  {
   "cell_type": "markdown",
   "id": "g1",
   "metadata": {},
   "source": "### Badge Placement\n\nUse the `placement` parameter to move the badge to any corner:"
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "g2",
   "metadata": {},
   "outputs": [],
   "source": "pmui.Row(\n    pmui.Badge(\n        pmui.IconButton(icon=\"mail\"), content=1, color=\"secondary\",\n        placement=\"top-right\",\n    ),\n    pmui.Badge(\n        pmui.IconButton(icon=\"mail\"), content=2, color=\"secondary\",\n        placement=\"top-left\",\n    ),\n    pmui.Badge(\n        pmui.IconButton(icon=\"mail\"), content=3, color=\"secondary\",\n        placement=\"bottom-right\",\n    ),\n    pmui.Badge(\n        pmui.IconButton(icon=\"mail\"), content=4, color=\"secondary\",\n        placement=\"bottom-left\",\n    ),\n)"
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.14.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}