# SettingsButton

**Kind:** Class

Interface to the settings button that lives outside the extension's viewport.

The `useSettingsButton` hook is the recommended way to use the settings button, but you can
also use it with `useWatchable` if you want more granular control (for example, to only
show the button conditionally).

```js
import {settingsButton} from '@airtable/blocks';
import {useWatchable} from '@airtable/blocks/ui';

function AppWithSettings({shouldShowSettingsButton}) {
    useEffect(() => {
        // A count of calls to `show()` and `hide()` is maintained internally. The button will
        // stay visible if there are more calls to `show()` than `hide()` - so here, we check
        // `isVisible` so we only we only call them when necessary.
        // The button is not visible by default.
        if (shouldShowSettingsButton && !settingsButton.isVisible) {
            settingsButton.show();
        } else if (!shouldShowSettingsButton && settingsButton.isVisible) {
            settingsButton.hide();
        }
    });

    useWatchable(settingsButton, 'click', function() {
        alert('Clicked!');
    });
}
```

## Properties

### `isVisible`

Type: `boolean`

Whether the settings button is being shown.
Can be watched.

## Methods

### `hide()`

Hide the settings button.

Note: A count of calls to `show()` and `hide()` is maintained internally. The button will
stay visible if there are more calls to `show()` than `hide()`.

**Returns:** `void`

### `show()`

Show the settings button.

**Returns:** `void`

### `unwatch(keys, callback, context?)`

Unwatch keys watched with `.watch`.

Should be called with the same arguments given to `.watch`.

Returns the array of keys that were unwatched.

**Parameters:**
- `keys` (`WatchableSettingsButtonKey | ReadonlyArray<WatchableSettingsButtonKey>`) — the keys to unwatch
- `callback` (`object`) — the function passed to `.watch` for these keys
- `context?` (`FlowAnyObject | null`) — the context that was passed to `.watch` for this `callback`

**Returns:** `Array<WatchableSettingsButtonKey>`

### `watch(keys, callback, context?)`

Get notified of changes to the model.

Every call to `.watch` should have a matching call to `.unwatch`.

Returns the array of keys that were watched.

**Parameters:**
- `keys` (`WatchableSettingsButtonKey | ReadonlyArray<WatchableSettingsButtonKey>`) — the keys to watch
- `callback` (`object`) — a function to call when those keys change
- `context?` (`FlowAnyObject | null`) — an optional context for `this` in `callback`.

**Returns:** `Array<WatchableSettingsButtonKey>`