SubComponents

Page

The following components extend the native <div> API. That's why the className prop is not included in the tables.

Props	Type	Required
children	ReactNode	✅

children

This subcomponent will always receive the following subcomponents:

• PageContent

• PageContentFooter

• PageHeader

• PageHeaderActions

• PageHeaderNavigation

• PageHeaderNavigationButton

PageContent

Props	Type	Required
children	ReactNode	✅
hasPadding	boolean	❌

children

The content that is shown. This subcomponent receives an structure to render, and as a footer, the following subcomponent as children:

• PageContentFooter

hasPadding

To add/remove the default padding.

PageContentFooter

Props	Type	Required
children	ReactNode	✅

children

The footer of the page content.

PageHeader

Props	Type	Required
children	ReactNode	✅

children

This subcomponent will always receive the following subcomponents:

• PageHeaderTitle

• PageHeaderNavigation

• PageHeaderActions

PageHeaderActions

Props	Type	Required
children	ReactNode	✅

children

Normally call to action elements passed as child.

PageHeaderNavigation

Props	Type	Required
children	ReactNode	✅

children

Used to navigate trough the page.

PageHeaderNavigationButton

This subcomponent extends the SDS Button API. Always a 'ghost' button.

PageHeaderTitle

Props	Type	Required
children	ReactNode	✅

children

A node passed to render a title.

Sidebar

Props	Type	Required
children	ReactNode	✅

children

This subcomponent receives the following subcomponents as child:

• SidebarHeader

• SidebarContent

SidebarContent

children

Used to render content inside the sidebar.

SidebarContentDivider

Just to add a divider in the Sidebar. Extend the 'div' props.

SidebarContentGroup

Props	Type	Required
children	ReactNode	✅
variant	'static' | 'accordion'	❌
heading	string	❌
defaultExpanded	boolean	❌
isExpanded	boolean	❌
onClick	(e: React.MouseEvent) => void;	❌

children

To create a group inside the sidebarcontent.

variant

To change the behavior of the ContentGroup. If static, it's always expanded.

heading

To pass a title.

defaultExpanded and isExpanded

The default expanded prop is used when having an uncontrolled approach. The isExpanded prop is used when using a controlled approach.

onClick

Mainly used to change the state, when clicked, and updating the isExpanded prop.

SidebarContentGroupActions

Props	Type	Required
children	ReactNode	✅

children

To add actions to a group inside the sidebarcontent.

SidebarContentGroupActionsButton

This subcomponent extends the SDS Button API. Always a 'ghost' button. Should be used inside a SidebarContentGroupActions. It is not required to use this button, but recommended. iconOnly variant used.

Props	Type	Required
icon	AvailableTelicon	✅

SidebarContentGroupItem

Props	Type	Required
children	ReactNode	✅
icon	AvailableTelicon	❌
avatar	string	❌
avatarProfilePic	string	❌
isLoading	boolean	❌
isActive	boolean	❌
notification	string	❌
notificationColor	| 'neutral' | 'inverted' | 'blue' | 'green' | 'yellow' | 'red' | 'indigo' | 'purple' | 'lime' | 'teal' | 'orange' | 'pink';	❌
collapseSidebarOnMobile	() => void	❌

children

To create an item inside a group.

icon

To render a custom icon, right next to the string passed.

avatar

To load an avatar instead of an icon.

avatarProfilePic

If using an avatar, to pass a profile picture.

isLoading and isActive

The isLoading prop, overrides the icon, to a loading icon. The isActive prop, should be use in a controlled way, normally.

notification

To add a notification badge.

notificationColor

To add a notification badge color.

collapseSidebarOnMobile

Method executed when using a mobile resolution (below 767px).

SidebarHeader

Props	Type	Required
children	ReactNode	✅

children

Used to render a header inside the sidebar.

TabBar

Props	Type	Required
children	ReactNode	✅

children

To render the tabbar.

TabBarItem

Props	Type	Required
icon	AvailableTelicon	✅
notifcation	string	❌
notificationColor	| 'neutral' | 'inverted' | 'blue' | 'green' | 'yellow' | 'red' | 'indigo' | 'purple' | 'lime' | 'teal' | 'orange' | 'pink';	❌
isActive	boolean	❌

icon

To pass a custom icon.

isActive

The isActive prop, should be use in a controlled way, normally, to set an active state..

notification

To add a notification badge.

notificationColor

To add a notification badge color.