Header Action
import { HeaderAction } from "@nudge-coach/ui";
Overview
The HeaderAction component is used to represent both actions and tabs in headers.
Props
children
React.ReactNode
The content displayed inside the button. Currently only icons imported from @nudge-coach/icons are supported.
onClick
() => void
Callback when the button is clicked.
selectable
A boolean that makes the Header Action function as a tab. Selectable HeaderActions have a different default icon color. A HeaderAction must be selectable for the corresponding selected boolean to work.
selected
A boolean that shows the HeaderAction as a selected tab.
Don't forget the selectable boolean or this won't work.
<HeaderAction selectable selected>
<Users />
</HeaderAction>
toggled
A boolean that represents an action that can be toggled on or off. A good example is a button that shows or hides a notification feed. Simply add the toggled boolean for the toggled on state and use a default Header Action otherwise.
Don't combine with the selectable boolean.
circleIcon
A boolean that displays the icon in a circle. This style is used for the primary navigation.
<HeaderAction circleIcon selectable>
<Users />
</HeaderAction>
badgeCount
A number that displays a badge on the action. This should be used to notify the user of items that deserve their attention. Examples include unread messages.
<HeaderAction circleIcon selectable badgeCount={3}>
<Users />
</HeaderAction>
warning
A boolean that places a warning badge on the HeaderAction indicating there is something that needs the user's immediate attention.
<HeaderAction warning>
<Unlock />
</HeaderAction>
success
A boolean that places a success badge on the HeaderAction indicating that an action was successful.
<HeaderAction success>
<Unlock />
</HeaderAction>
notification
A boolean that places a smaller badge without any text on the HeaderAction indicating that an update deserves the users attention. Use the notification boolean only when you don't want to inform the user of a quantify of things that have been updated. For example: to notify the user of a number of new messages set badgeCount instead of the notification boolean.
<HeaderAction notification>
<Activity />
</HeaderAction>