Packages
petal_components
0.10.4
4.7.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/badge.ex
defmodule PetalComponents.Badge do
use Phoenix.Component
# prop label, :string
# prop size, :string, options: ["xs", "sm", "md", "lg", "xl"]
# prop variant, :string
# prop color, :string, options: ["primary", "secondary", "info", "success", "warning", "danger", "gray"]
# prop class, :css_class
def badge(assigns) do
assigns = assigns
|> assign_new(:size, fn -> "md" end)
|> assign_new(:variant, fn -> "light" end)
|> assign_new(:color, fn -> "primary" end)
|> assign_new(:class, fn -> "" end)
|> assign_new(:icon, fn -> false end)
|> assign_new(:inner_block, fn -> nil end)
~H"""
<badge class={Enum.join([
"rounded inline-flex items-center justify-center focus:outline-none border",
size_classes(@size),
icon_classes(@icon),
get_color_classes(%{color: @color, variant: @variant}),
@class
], " ")}>
<%= if @inner_block do %>
<%= render_slot(@inner_block) %>
<% else %>
<%= @label %>
<% end %>
</badge>
"""
end
defp size_classes(size) do
case size do
"sm" -> "text-[0.625rem] font-semibold px-1.5"
"md" -> "text-xs font-semibold px-2.5 py-0.5"
"lg" -> "text-sm font-semibold px-2.5 py-0.5"
end
end
defp icon_classes(icon) do
if icon do
"flex gap-1 items-center whitespace-nowrap"
end
end
defp get_color_classes(%{color: "primary", variant: variant}) do
case variant do
"light" ->
"text-primary-800 bg-primary-100 border-primary-100 dark:bg-primary-200 dark:border-primary-200"
"dark" ->
"text-white bg-primary-600 border-primary-600"
"outline" ->
"text-primary-600 border-primary-600 dark:text-primary-400 dark:border-primary-400"
end
end
defp get_color_classes(%{color: "secondary", variant: variant}) do
case variant do
"light" ->
"text-secondary-800 bg-secondary-100 border-secondary-100 dark:bg-secondary-200 dark:border-secondary-200"
"dark" ->
"text-white bg-secondary-600 border-secondary-600"
"outline" ->
"text-secondary-600 border border-secondary-600 dark:text-secondary-400 dark:border-secondary-400"
end
end
defp get_color_classes(%{color: "info", variant: variant}) do
case variant do
"light" ->
"text-blue-800 bg-blue-100 border-blue-100 dark:bg-blue-200 dark:border-blue-200"
"dark" ->
"text-white bg-blue-600 border-blue-600"
"outline" ->
"text-blue-600 border border-blue-600 dark:text-blue-400 dark:border-blue-400"
end
end
defp get_color_classes(%{color: "success", variant: variant}) do
case variant do
"light" ->
"text-green-800 bg-green-100 border-green-100 dark:bg-green-200 dark:border-green-200"
"dark" ->
"text-white bg-green-600 border-green-600"
"outline" ->
"text-green-600 border border-green-600 dark:text-green-400 dark:border-green-400"
end
end
defp get_color_classes(%{color: "warning", variant: variant}) do
case variant do
"light" ->
"text-yellow-800 bg-yellow-100 border-yellow-100 dark:bg-yellow-200 dark:border-yellow-200"
"dark" ->
"text-white bg-yellow-600 border-yellow-600"
"outline" ->
"text-yellow-600 border border-yellow-600 dark:text-yellow-400 dark:border-yellow-400"
end
end
defp get_color_classes(%{color: "danger", variant: variant}) do
case variant do
"light" ->
"text-red-800 bg-red-100 border-red-100 dark:bg-red-200 dark:border-red-200"
"dark" ->
"text-white bg-red-600 border-red-600"
"outline" ->
"text-red-600 border border-red-600 dark:text-red-400 dark:border-red-400"
end
end
defp get_color_classes(%{color: "gray", variant: variant}) do
case variant do
"light" ->
"text-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-200 dark:border-gray-200"
"dark" ->
"text-white bg-gray-600 border-gray-600 dark:bg-gray-700 dark:border-gray-700"
"outline" ->
"text-gray-600 border border-gray-600 dark:text-gray-400 dark:border-gray-400"
end
end
end