Packages
noora
0.2.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
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.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/badge.ex
defmodule Noora.Badge do
@moduledoc """
Renders a customizable badge component with various styles, colors, sizes, and optional icons or status indicators.
"""
use Phoenix.Component
import Noora.Icon
import Noora.Utils
attr(:style, :string,
values: ~w(fill light-fill),
default: "fill",
doc: "The style of the badge"
)
attr(:label, :string, required: true, doc: "The label of the badge")
attr(:color, :string,
values: ~w(neutral destructive warning attention success information focus primary secondary),
default: "neutral",
doc: "The color of the badge"
)
attr(:size, :string, values: ~w(small large), default: "small", doc: "The size of the badge")
attr(:disabled, :boolean,
default: false,
doc: "Whether the badge is disabled. Overrides the `color` attribute."
)
attr(:dot, :boolean, default: false, doc: "Whether to render a dot on the side of the label.")
slot(:icon, doc: "The icon to render next to the label. Overrides the `dot` attribute.")
attr(:rest, :global)
def badge(assigns) do
~H"""
<span
class="noora-badge"
data-style={@style}
data-color={@color}
data-size={@size}
data-disabled={@disabled}
data-dot={@dot}
data-icon={has_slot_content?(@icon, assigns)}
{@rest}
>
<%= if @dot || has_slot_content?(@icon, assigns) do %>
<div data-part="icon">
<%= if has_slot_content?(@icon, assigns) do %>
{render_slot(@icon)}
<% else %>
<.small_dot :if={@size == "small"} />
<.large_dot :if={@size == "large"} />
<% end %>
</div>
<% end %>
{@label}
</span>
"""
end
attr(:type, :string,
values: ~w(icon dot),
default: "icon",
doc: "Whether to render the prefix as a dot, or a status-specific icon"
)
attr(:status, :string,
values: ~w(success error warning attention disabled),
required: true,
doc: "The status of the badge"
)
attr(:label, :string, required: true, doc: "The label of the badge")
attr(:rest, :global)
def status_badge(assigns) do
~H"""
<span class="noora-status-badge" data-status={@status} {@rest}>
<span data-part="icon">
<.status_icon :if={@type == "icon"} status={@status} />
<.large_dot :if={@type == "dot"} />
</span>
<span data-part="label">{@label}</span>
</span>
"""
end
def status_icon(%{status: "success"} = assigns) do
~H"""
<.circle_check />
"""
end
def status_icon(%{status: "error"} = assigns) do
~H"""
<.alert_circle />
"""
end
def status_icon(%{status: "warning"} = assigns) do
~H"""
<.alert_hexagon />
"""
end
def status_icon(%{status: "attention"} = assigns) do
~H"""
<.alert_triangle />
"""
end
def status_icon(%{status: "disabled"} = assigns) do
~H"""
<.cancel />
"""
end
defp small_dot(assigns) do
~H"""
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<rect x="4" y="4" width="4" height="4" rx="1" fill="#FDFDFD" />
</svg>
"""
end
defp large_dot(assigns) do
~H"""
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect x="5" y="5" width="6" height="6" rx="1.33333" fill="currentColor" />
</svg>
"""
end
end