# Indicator Examples and Reference

## Default Indicator

An example of a default Indicator without any extra properties.

    library(dash)
    library(dashDaq)
    library(dashHtmlComponents)

    app <- Dash$new()

    app$layout(htmlDiv(list(
      daqIndicator(id = 'my-indicator',
                   label = 'Default'),

      htmlButton('On/Off',
                 id = 'my-indicator-button',
                 n_clicks = 0)
    )))

    app$callback(
      output(id = "my-indicator", property = "value"),
      params = list(input(id = "my-indicator-button", property = "n_clicks")),

      update_output <- function(value) {
        if (value %% 2 == 0) {
          value = TRUE
        } else {
          value = FALSE
        }
        return(value)
      }
    )

    app$run_server()

Default

### Label

Define the label and label orientation with `label` and `labelPosition`.

    library(dashDaq)

    daqIndicator(
        label = "Label",
        labelPosition = "bottom",
        value = TRUE
    )

Label

### Boolean Indicator Off

A boolean indicator set to off `value=FALSE`.

    library(dashDaq)

    daqIndicator(
        label = "Off",
        value = FALSE
    )

Off

### Square

Create a square boolean indicator by setting the `width` and `height` to the same value.

    library(dashDaq)

    daqIndicator(
        label = "Square",
        width = 16,
        height = 16
    )

Square

### Color

Define the color of the boolean indicator with `color='#<color>'`

    library(dashDaq)

    daqIndicator(
        label = "Purple",
        color = "#551A8B",
        value = TRUE
    )

Purple

## Indicator Properties

> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

`id` (character; optional): The ID used to identify the indicator in Dash callbacks.

`value` (logical; optional): If TRUE, indicator is illuminated.

`color` (character; default `colors.DARKER_PRIMARY`): Color of the indicator.

`size` (numeric; default `15`): Size of the component. Either use this or width and height.

`width` (numeric; optional): Width of the component. Set both width and height for a rectangular indicator.

`height` (numeric; optional): Height of the component. Set both width and height for a rectangular indicator.

`theme` (named list; default `light`): Theme configuration to be set by a ThemeProvider.

`label` (named list; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties.

`label` is a character | named list with keys:

- `label` (character; optional)

- `style` (named list; optional)

`labelPosition` (a value equal to: 'top', 'bottom', 'right' or 'left'; default `'top'`): Where the indicator label is positioned.

`className` (character; optional): Class to apply to the root component element.

`style` (named list; optional): Style to apply to the root component element.