Styled header for a widget - title and whatever you want on the right side, usually some action buttons
| Property | Type | Required | Default Value | Description |
|---|---|---|---|---|
className | String | false | null | className, e.g. "my-custom-styling" |
children | React.Node | false | null | What is going to be rendered as title |
rightEl | React.Node | false | null | React node, same as children |
Component | React.ElementType | false | div | Renders 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. |
noDivider | Boolean | false | Hides bottom border if true | |
...rest | any | false | Other properties are passed down to the wrapping element |
<UikWidget>
<UikWidgetHeader
rightEl={ (
<UikButton primary>
CTA Here
</UikButton>
) }
>
Click me
</UikWidgetHeader>
<UikWidgetContent>
Some Content Here
</UikWidgetContent>
</UikWidget>