gallery_grid_viewScreen PreviewsrocketGetting StartedhelpReact DocsmultitaskingChangeloglightbulbSupportloveDownload kit

helpDocumentation

Getting StartedReact DocumentationSupportChangelog
Screen PreviewsrocketDownload Kit
GuidesElements Styleguide→Importing and Bundle Size→"Component" Property→Building layouts with Uik→
ComponentsAvatar→Button→ButtonGroup→Chart→ChartLineBlank→Checkbox→CodeHighlight→CodeHighlightContainer→ContainerHorizontal→ContainerVertical→ContentTitle→Divider→Dropdown→DropdownItem→EmojiHeadline→FormInputGroup→Headline→HeadlineDesc→Input→MapPinCircle→NavBurger→NavLink→NavLinkDark→NavLinkSecondary→NavLinkTwo→NavPanel→NavSection→NavSectionTitle→NavTitle→OutsideClickHandler→ProgressBar→Radio→Select→StarRating→Tabs→Tag→TagContainer→Toggle→TopBar→TopBarLink→TopBarLinkContainer→TopBarSection→TopBarTitle→Uikon→Widget→WidgetBottomCta→WidgetContent→WidgetDoc→WidgetHeader→WidgetTable→

UikWidgetHeader

Styled header for a widget - title and whatever you want on the right side, usually some action buttons

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullclassName, e.g. "my-custom-styling"
childrenReact.NodefalsenullWhat is going to be rendered as title
rightElReact.NodefalsenullReact node, same as children
ComponentReact.ElementTypefalsedivRenders the component with a given react element. By default, the component renders <div />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
noDividerBooleanfalseHides bottom border if true
...restanyfalseOther properties are passed down to the wrapping element

UikWidgetHeader Examples

Click me

Some Content Here
<UikWidget>
  <UikWidgetHeader
    rightEl={ (
      <UikButton primary>
      CTA Here
      </UikButton>
    ) }
  >
    Click me
  </UikWidgetHeader>
  <UikWidgetContent>
    Some Content Here
  </UikWidgetContent>
</UikWidget>