# useSettingsButton

**Kind:** Function

A hook for using the settings button that lives outside the extension's viewport. It will show
the settings button (hidden by default) and call the provided callback whenever the settings
button is clicked. It will also re-render your component when the settings button is clicked.

```js
import {useSettingsButton} from '@airtable/blocks/ui';
import {useState} from 'react';

function ComponentWithSettings() {
     const [isShowingSettings, setIsShowingSettings] = useState(false);
     useSettingsButton(function() {
         setIsShowingSettings(!isShowingSettings);
     });

     if (isShowingSettings) {
         return <SettingsComponent />
     }
     return <MainComponent />
}
```

**Parameters:**
- `onClickCallback` (`FlowAnyFunction`) — A callback to call when the button is clicked.

**Returns:** `void`