Packages
noora
0.3.2
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/button_group.ex
defmodule Noora.ButtonGroup do
@moduledoc """
ButtonGroup component for Noora UI.
This component allows grouping multiple buttons together with consistent styling and spacing.
It handles layout, alignment, and proper spacing between buttons in the group.
## Example
```elixir
<.button_group size="medium">
<.button_group_item label="Edit" navigate="/edit" />
<.button_group_item label="Delete" />
</.button_group>
```
"""
use Phoenix.Component
attr(:size, :string, default: "medium", values: ~w(small medium large), doc: "The size of the button group")
attr(:rest, :global, doc: "Additional HTML attributes")
slot(:inner_block, required: true, doc: "Button group items to be rendered")
def button_group(assigns) do
~H"""
<div class="noora-button-group" data-size={@size} {@rest}>
{render_slot(@inner_block)}
</div>
"""
end
attr(:label, :string, required: true, doc: "The label of the button group item")
attr(:href, :any, default: nil, doc: "Uses traditional browser navigation to the new location")
attr(:navigate, :string, default: nil, doc: "Navigates to a LiveView")
attr(:patch, :string, default: nil, doc: "Patches the current LiveView")
attr(:icon_only, :boolean, default: false, doc: "Determines if the button is icon only")
attr(:rest, :global)
slot(:icon_left, doc: "Icon displayed on the left of an item")
slot(:icon_right, doc: "Icon displayed on the right of an item")
slot(:inner_block, required: false, doc: "Inner block that renders HEEx content")
def button_group_item(assigns) do
~H"""
<%= if @href || @navigate || @patch do %>
<.link
class="noora-button-group-item"
href={@href}
navigate={@navigate}
patch={@patch}
data-icon-only={@icon_only}
{@rest}
>
<%= if @icon_left && !@icon_only do %>
{render_slot(@icon_left)}
<% end %>
<span :if={!@icon_only} data-part="label">{@label}</span>
<%= if @icon_only do %>
{render_slot(@inner_block)}
<% end %>
<%= if @icon_right && !@icon_only do %>
{render_slot(@icon_right)}
<% end %>
</.link>
<% else %>
<button class="noora-button-group-item" data-icon-only={@icon_only} {@rest}>
<%= if @icon_left && !@icon_only do %>
{render_slot(@icon_left)}
<% end %>
<span :if={!@icon_only} data-part="label">{@label}</span>
<%= if @icon_only do %>
{render_slot(@inner_block)}
<% end %>
<%= if @icon_right && !@icon_only do %>
{render_slot(@icon_right)}
<% end %>
</button>
<% end %>
"""
end
end