Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Functionalities Module

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Container of a list of options.

12345678910
<FunctionalitiesModule
  variant="DEFAULT"
  tabsContainerAriaLabel="options"
  tabsConfig={{ variant: 'DEFAULT' }}
  sections={[
    {
      tab: {
        content: 'Tab 1',
      },
      options: [

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<FunctionalitiesModule
  variant="DEFAULT"
  sections={[
    {
      tab: {
        content: 'Tab 1',
      },
      options: [
        {
          label: 'option 0 (disabled)',

Tabs

Each tab can be customize with a title through the optionsTitle prop.

12345678910
<FunctionalitiesModule
  variant="DEFAULT"
  sections={[
    {
      tab: {
        content: 'Tab 1',
      },
      options: [
        {
          label: 'option 0 (disabled)',

Button

The component has a different interaction behaviour in responsive views, appearing as an actionBottomSheet. The following props can be used for modifying the component:

  • trigger: trigger button that displays and closes the component.
  • actionBottomSheet: for the actionBottomSheet component.
12345678910
<FunctionalitiesModule
  variant="DEFAULT"
  sections={[
    {
      tab: {
        content: 'Tab 1',
      },
      options: [
        {
          label: 'option 0 (disabled)',

Options

The list of options display inside de component can be add through sections.

12345678910
<FunctionalitiesModule
  variant="DEFAULT"
  sections={[
    {
      tab: {
        content: 'Tab 1',
      },
      options: [
        {
          label: 'option 0 (disabled)',
FooterAccessibility
Functionalities ModuleDesign Specs