How to Add View Switcher Buttons to Your Notion Databases

Adding some a set of view switcher buttons is a great way to add extra interactivity to the content on your site.

The Database View Picker snippet allows you to transform Notion’s default database view selector into a set of visually appealing tabs, making it easier for your users to navigate between different views of your database.

Install the snippet

Go into your Site Dashboard
Open the ‘Code’ page
In the ‘Head’ tab, paste the following snippet:

<link rel="stylesheet" href="https://sites.super.so/snippets/view-picker.css">

If you want to customize the colors, click into the ‘CSS’ tab, and paste the following snippet:

:root {  
/* Border radius */  
--picker-border-radius: 8px!important;  
/* Active colors */  
--picker-active-bg-color: rgb(233, 233, 233)!important;  
--picker-active-text-color: rgb(70, 70, 70)!important;  
/* Default colors */  
--picker-border-color: rgb(233, 233, 233)!important;  
--picker-text-color: rgb(70, 70, 70)!important;  
/* Hover colors */  
--picker-hover-bg-color: rgb(233, 233, 233)!important;  
--picker-hover-text-color: rgb(70, 70, 70)!important;  
--picker-hover-border-color: rgb(233, 233, 233)!important;
}

Finally, customize the variables by swapping out the ‘rgb’ colors, you can use hex codes too.

Tip: pick colors here: https://htmlcolorcodes.com/color-picker/

Once you have added the code to the CSS section and to the Head section, remember to save your work and then refresh the page in the browser to see the changes on your live site. Remember that any custom code requires a paid Super subscription.