Tabbed Container Component

Configuration Options
Theme Options


The tabbed component is just like the Container component where you can group components, but it also comes with a tab bar on top to conveniently switch between multiple views.


Configuration Options

Auto Height

Expected Type: Boolean

If set to true, the container automatically adjusts the height based on it's contents.

Note: Manually changing the height in the layout settings has no effect when this is enabled.


The container can show different sets of components based on the view set. This is useful to create permission based containers or zero states.


Creating a view

You can add more views by clicking the + View button in the container's configuration setting. Each view can be configured with the following properties:

Property Description Type Example
Title The title for the view, just used for readability within configurations. String Zero State
Key The key for this view. This is what's used to set the view dynamically String zeroState

Setting views dynamically

Views can be dynamically set through other components such as buttons and tabs. So, for example, we want to change the view on a button click.

  • Open the button configuration.
  • Add a Click action trigger.
  • For the action, select Control component.
  • For the component, select the container you want to switch the view for.
  • For the component property, select Container View.
  • Add the key for the view to set as the New Value.


  • Click: Triggers whenever the chart is clicked.
  • Double Click: Triggers whenever the chart is clicked twice in quick succession.
  • Right Click: Triggers whenever the chart is right-clicked.
  • Mouse Enter: Triggers whenever the mouse starts hovering over the component.
  • Mouse Leave: Triggers whenever the mouse stops hovering over the component.

Theme Options

  • Shadow: The containers's shadow. (Shadow)
  • Border: The containers's border. You can also specify the radius for the edges. (Border)
  • Background Color: The containers's background color. (String | Hex)
  • Tab Inactive Color: The tab text's color when inactive. (String | Hex)
  • Tab Active Color: The tab text's color when active. (String | Hex)
  • Tab Underline Color: The tab underline's color when active. (String | Hex)
  • Header Text Size: The header text's font size. (Number | Pixels)
  • Header Color: The header's background color. (String | Hex)
  • Header Padding: The header's padding. (Number | Pixels)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. β†’