Packages
noora
0.28.4
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.ex
defmodule Noora.Button do
@moduledoc """
A component for rendering both standard buttons and link-style buttons, offering flexible styling options for variants, sizes, and icon placement.
"""
use Phoenix.Component
@button_variants ~w(primary secondary destructive)
@button_sizes ~w(small medium large)
def button_variants, do: @button_variants
def button_sizes, do: @button_sizes
attr(:label, :string, required: false, doc: "The label of the button")
attr(:variant, :string,
values: @button_variants,
default: "primary",
doc: "Determines the style"
)
attr(:size, :string,
values: @button_sizes,
default: "large",
doc: "Determines the overall size of the elements, including padding, font size, and other items"
)
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")
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")
attr(:rest, :global, include: ~w(phx-click disabled form))
def button(assigns) do
~H"""
<%= if (@href || @navigate || @patch) && !@rest[:disabled] do %>
<.link
class="noora-button"
href={@href}
navigate={@navigate}
patch={@patch}
data-variant={@variant}
data-size={@size}
data-icon-only={@icon_only}
{@rest}
>
<%= if @icon_left && !@icon_only do %>
{render_slot(@icon_left)}
<% end %>
<span :if={!@icon_only}>{@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"
data-variant={@variant}
data-size={@size}
data-icon-only={@icon_only}
{@rest}
>
<%= if @icon_left && !@icon_only do %>
{render_slot(@icon_left)}
<% end %>
<span :if={!@icon_only}>{@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
attr(:variant, :string,
values: @button_variants,
default: "primary",
doc: "Determines the style"
)
attr(:size, :string,
values: @button_sizes,
default: "large",
doc: "Determines the overall size of the elements, including padding, font size, and other items"
)
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")
slot(:inner_block, required: true, doc: "Inner block that renders HEEx content")
attr(:rest, :global, include: ~w(phx-click disabled))
def neutral_button(assigns) do
~H"""
<%= if @href || @navigate || @patch do %>
<.link
class="noora-neutral-button"
href={@href}
navigate={@navigate}
patch={@patch}
data-variant={@variant}
data-size={@size}
{@rest}
>
{render_slot(@inner_block)}
</.link>
<% else %>
<button class="noora-neutral-button" data-variant={@variant} data-size={@size} {@rest}>
{render_slot(@inner_block)}
</button>
<% end %>
"""
end
attr(:label, :string, required: true, doc: "The label of the button")
attr(:variant, :string,
values: @button_variants,
default: "primary",
doc: "Determines the style"
)
attr(:size, :string,
values: @button_sizes,
default: "large",
doc: "Determines the overall size of the elements, including padding, font size, and other items"
)
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(:underline, :boolean, default: false, doc: "Determines if the button is underlined")
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")
def link_button(assigns) do
~H"""
<.link
href={@href}
navigate={@navigate}
patch={@patch}
class="noora-link-button"
data-variant={@variant}
data-size={@size}
data-underline={@underline}
{@rest}
>
<%= if @icon_left do %>
{render_slot(@icon_left)}
<% end %>
<span>{@label}</span>
<%= if @icon_right do %>
{render_slot(@icon_right)}
<% end %>
</.link>
"""
end
end