> For the complete documentation index, see [llms.txt](https://docs.webtonative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webtonative.com/javascript-apis/status-bar-styling.md).

# JavaScript Status Bar API

{% hint style="info" %}

<pre class="language-html" data-overflow="wrap"><code class="lang-html">You'll need to import the javascript file in your website before starting from this <a data-footnote-ref href="#user-content-fn-1">link</a>.
</code></pre>

{% endhint %}

Dynamically update status bar visibility and style. To update status bar styling call following function

{% tabs %}
{% tab title="Plain Javascript" %}

```
WTN.statusBar({
    style:"light",
    color:"80ff0000",
    overlay:true //Only for android
});
```

{% endtab %}

{% tab title="npm" %}

```
import { statusBar } from "webtonative"

statusBar({
    style:"light",
    color:"80ff0000",
    overlay:true //Only for android
});
```

{% endtab %}
{% endtabs %}

* **Style** : "light" or "dark". Sets the icon colors in the status bar. Default on iOS is dark and default on Android is light. Setting Android to dark icons requires Marshmallow 6.0 or later.
* **Color**: in RRBBGG or AARRBBGG format with hex values. Sets the status bar to a solid color. On Android, it requires Lollipop 5.0 or later. Use 00000000 for completely transparent.
* **Overlay (Only For Android)**: "true" or "false". If true, web content will extend underneath the status bar. If false (default behaviour), web content will start below the bottom of the status bar.

[^1]: <https://docs.webtonative.com/javascript-apis/getting-started>