PetalComponents.Badge (petal_components v4.15.1)

Copy Markdown View Source

Summary

Functions

badge(assigns)

Attributes

  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • variant (:string) - Defaults to "light". Must be one of "light", "dark", "soft", or "outline".
  • color (:string) - Defaults to "primary". Must be one of "primary", "secondary", "info", "success", "warning", "danger", or "gray".
  • role (:string) - Defaults to "note". Must be one of "note", or "status".
  • with_icon (:boolean) - adds some icon base classes. Defaults to false.
  • dot (:boolean) - renders a small filled circle before the label - the status-badge convention. The dot rides the badge's own colour and is decorative (aria-hidden), so the label has to carry the meaning on its own. Renders before an icon when both are set. Defaults to false.
  • dot_color (:string) - colours the dot independently of the badge. nil, the default, inherits the badge's colour exactly as before. Set it for the neutral chip - quiet chrome, one semantic dot: <.badge color="gray" variant="outline" dot dot_color="success">Production</.badge>. The stop matches what an inherited dot of that colour shows on the same variant, so the override moves the hue and nothing else. The dark variant is the exception - its inherited dot is currentColor, which no ramp can match - so an override there takes the 400 stop, and is a visible change even when it names the badge's own colour. Keep it to that shape: when the badge already carries a semantic colour of its own, leave the dot inherited rather than putting two meanings in one chip - a success badge with a danger dot reads as neither. Defaults to nil. Must be one of nil, "primary", "secondary", "info", "success", "warning", "danger", or "gray".
  • class (:any) - CSS class for parent div. Defaults to nil.
  • label (:string) - label your badge. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block