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.

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.

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

SidebarContentGroupItem

Props
Type
Required

children

ReactNode

icon

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

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.

Last updated