{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``Button`` widget allows triggering events when the button is clicked. In addition to a `value` parameter, which will toggle from `False` to `True` while the click event is being processed an additional ``clicks`` parameter that can be watched to subscribe to click events.\n",
    "\n",
    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **``clicks``** (int): Number of clicks (can be listened to)\n",
    "* **``value``** (boolean): Toggles from `False` to `True` while the event is being processed.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`button_style`** (str): The button style, either 'solid' or 'outline'.\n",
    "* **``button_type``** (str): A button theme; should be one of ``'default'`` (white), ``'primary'`` (blue), ``'success'`` (green), ``'info'`` (yellow), ``'light'`` (light), or ``'danger'`` (red).\n",
    "* **``description``** (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.\n",
    "* **`icon`** (str): An icon to render to the left of the button label. Either an SVG or an icon name which is loaded from [tabler-icons.io](https://tabler-icons.io).\n",
    "* **`icon_size`** (str): Size of the icon as a string, e.g. 12px or 1em.\n",
    "* **``disabled``** (boolean): Whether the widget is editable.\n",
    "* **``name``** (str): The title of the widget.\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "button = pn.widgets.Button(name='Click me', button_type='primary')\n",
    "button"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The ``clicks`` parameter will report the number of times the button has been pressed:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "button.clicks"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can `bind` to the `Button` to trigger actions when the `Button` is clicked."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "indicator = pn.indicators.LoadingSpinner(value=False, size=25)\n",
    "\n",
    "def update_indicator(event):\n",
    "    if not event:\n",
    "        return\n",
    "    \n",
    "    indicator.value = not indicator.value\n",
    "\n",
    "pn.bind(update_indicator, button, watch=True)\n",
    "\n",
    "pn.Column(button, indicator)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also `bind` to the `clicks` parameter"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def handle_click(clicks):\n",
    "    return f'You have clicked me {clicks} times'\n",
    "\n",
    "pn.Column(\n",
    "    button,\n",
    "    pn.bind(handle_click, button.param.clicks),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Alternatively you can use the ``on_click`` method to trigger a function when the button is clicked:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "text = pn.widgets.TextInput(value='Ready')\n",
    "\n",
    "def b(event):\n",
    "    text.value = 'Clicked {0} times'.format(button.clicks)\n",
    "    \n",
    "button.on_click(b)\n",
    "pn.Row(button, text)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Styles\n",
    "\n",
    "The color of the button can be set by selecting one of the available `button_type` values and the `button_style` can be `'solid'` or `'outline'`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(\n",
    "    *(pn.Column(*(pn.widgets.Button(name=p, button_type=p, button_style=bs) for p in pn.widgets.Button.param.button_type.objects))\n",
    "    for bs in pn.widgets.Button.param.button_style.objects)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Icons\n",
    "\n",
    "The ``Button`` name string may contain Unicode and Emoji characters, providing a convenient way to define common graphical buttons:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "backward = pn.widgets.Button(name='\\u25c0', width=50)\n",
    "forward = pn.widgets.Button(name='\\u25b6', width=50)\n",
    "search = pn.widgets.Button(name='🔍', width=100)\n",
    "save = pn.widgets.Button(name=\"💾 Save\", width=100)\n",
    "copy = pn.widgets.Button(name=\"Copy ✂️\", width=100)\n",
    "\n",
    "pn.Row(backward, forward, search, save, copy)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "However you can also provide an explicit `icon`, either as a named icon loaded from [tabler-icons.io](https://tabler-icons.io)/:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(\n",
    "    pn.widgets.Button(icon='alert-triangle-filled', button_type='warning', name='WARNING'),\n",
    "    pn.widgets.Button(icon='bug', button_type='danger', name='Error')\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "or as an explicit SVG:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "cash_icon = \"\"\"\n",
    "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-tabler icon-tabler-cash\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n",
    "  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n",
    "  <path d=\"M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z\" />\n",
    "  <path d=\"M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" />\n",
    "  <path d=\"M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2\" />\n",
    "</svg>\n",
    "\"\"\"\n",
    "\n",
    "pn.widgets.Button(icon=cash_icon, button_type='success', name='Checkout', icon_size='2em')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Controls\n",
    "\n",
    "The `Button` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(button.controls, button)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
