# `Lotus.Web.CoreComponents`
[🔗](https://github.com/elixir-lotus/lotus_web/blob/v1.2.0/lib/lotus/web/components/core_components.ex#L1)

Core UI components for Lotus Web.

# `button`

Renders a button.

## Examples

    <.button>Send!</.button>
    <.button phx-click="go" class="ml-2">Send!</.button>

## Attributes

* `type` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* `variant` (`:string`) - Defaults to `"default"`.
* Global attributes are accepted. Supports all globals plus: `["disabled", "form", "name", "value"]`.
## Slots

* `inner_block` (required)

# `error`

Generates a generic error message.

## Slots

* `inner_block` (required)

# `flash`

Renders a flash message.

## Attributes

* `flash` (`:map`) (required)
* `kind` (`:atom`) (required)

# `hide`

# `hide_modal`

# `input`

Renders an input with label and error messages.

A `Phoenix.HTML.FormField` may be passed as argument,
which is used to retrieve the input name, id, and values.
Otherwise all attributes may be passed explicitly.

## Types

This function accepts all HTML input types, considering that:

  * You may also set `type="select"` to render a `<select>` tag

  * `type="checkbox"` is used exclusively to render boolean values

  * For live file uploads, see `Phoenix.Component.live_file_input/1`

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
for more information. Unsupported types, such as hidden and radio,
are best written directly in your templates.

## Examples

    <.input field={@form[:email]} type="email" />
    <.input name="my-input" errors={["oh no!"]} />

## Attributes

* `id` (`:any`) - Defaults to `nil`.
* `name` (`:any`)
* `label` (`:string`) - Defaults to `nil`.
* `value` (`:any`)
* `type` (`:string`) - Defaults to `"text"`. Must be one of `"checkbox"`, `"color"`, `"date"`, `"datetime-local"`, `"email"`, `"file"`, `"month"`, `"number"`, `"password"`, `"radio"`, `"range"`, `"search"`, `"select"`, `"multiselect"`, `"tel"`, `"text"`, `"textarea"`, `"time"`, `"url"`, or `"week"`.
* `field` (`Phoenix.HTML.FormField`) - a form field struct retrieved from the form, for example: @form[:email].
* `errors` (`:list`) - Defaults to `[]`.
* `checked` (`:boolean`) - the checked flag for checkbox inputs.
* `prompt` (`:string`) - the prompt for select inputs. Defaults to `nil`.
* `options` (`:list`) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
* `multiple` (`:boolean`) - the multiple flag for select inputs. Defaults to `false`.
* Global attributes are accepted. Supports all globals plus: `["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"]`.

# `label`

Renders a label.

## Attributes

* `for` (`:string`) - Defaults to `nil`.
## Slots

* `inner_block` (required)

# `modal`

Renders a modal.

## Examples

    <.modal id="confirm-modal">
      This is a modal.
    </.modal>

JS commands may be passed to the `:on_cancel` to configure
the closing/cancel event, for example:

    <.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
      This is another modal.
    </.modal>

## Attributes

* `id` (`:string`) (required)
* `show` (`:boolean`) - Defaults to `false`.
* `on_cancel` (`Phoenix.LiveView.JS`) - Defaults to `%Phoenix.LiveView.JS{ops: []}`.
## Slots

* `inner_block` (required)

# `show`

# `show_modal`

# `spinner`

Renders a loading spinner.

## Examples

    <.spinner />
    <.spinner size="32" />
    <.spinner class="text-blue-500" />

## Attributes

* `size` (`:string`) - Defaults to `"24"`.
* `class` (`:string`) - Defaults to `""`.
* Global attributes are accepted.

# `table`

Renders a table with striped rows.

## Examples

    <.table id="results" rows={@results}>
      <:col :let={row} label="id">{row.id}</:col>
      <:col :let={row} label="name">{row.name}</:col>
    </.table>

## Attributes

* `id` (`:string`) (required)
* `rows` (`:list`) (required)
* `row_id` (`:any`) - the function for generating the row id. Defaults to `nil`.
* `row_click` (`:any`) - the function for handling phx-click on each row. Defaults to `nil`.
* `sticky_header` (`:boolean`) - if true, keeps header visible while body scrolls. Defaults to `false`.
* `row_item` (`:any`) - the function for mapping each row before calling the :col slots. Defaults to `&Function.identity/1`.
## Slots

* `col` (required) - Accepts attributes:

  * `label` (`:string`)

# `theme_selector`

Renders a theme toggle button that switches between light and dark modes.
Shows sun icon in dark mode (to switch to light) and moon icon in light mode (to switch to dark).

## Attributes

* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*