# Indicator Examples and Reference

## Default Indicator

An example of a default Indicator without any extra properties.

    using Dash
    using DashDaq

    external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

    app = dash(external_stylesheets=external_stylesheets)

    app.layout = html_div([
      daq_indicator(
          id="my-indicator",
          label="Default",
      ),
      html_button(
          "On/Off",
          id="my-indicator-button",
          n_clicks=0
      ),
    ])

    callback!(app,
      Output("my-indicator", "value"),
      [Input("my-indicator-button", "n_clicks")]
    ) do value
      if value % 2 == 0
          value = true
      else
          value = false
      end
      return value
    end
    run_server(app, "0.0.0.0", debug=true)

Default

### Label

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_indicator(
      label="Label",
      labelPosition="bottom",
      value=true
    )

    run_server(app, "0.0.0.0", debug=true)

Label

### Boolean Indicator Off

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_indicator(
      label="Off",
      value=false
    )

    run_server(app, "0.0.0.0", debug=true)

Off

### Square

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_indicator(
      label="Square",
      width=16,
      height=16
    )

    run_server(app, "0.0.0.0", debug=true)

Square

### Color

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_indicator(
      label="Purple",
      color="#551A8B",
      value=true
    )

    run_server(app, "0.0.0.0", debug=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` (String; optional): The ID used to identify the indicator in Dash callbacks.

`value` (Bool; optional): If true, indicator is illuminated.

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

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

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

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

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

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

`label` is a String | Dict with keys:

- `label` (String; optional)

- `style` (Dict; optional)

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

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

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