View Source Shino.UI.ButtonLike (shino v0.2.0-alpha.1)

Provides button-like components.

References

Summary

Functions

Renders a link.

Renders a button.

Functions

Renders a link.

This components is implemented similarly to <.button />, except the underlying element is changed to <.link />.

This is a workaround for the lack of asChild support in Phoenix.Component.

Attributes

  • class (:any) - Defaults to nil.
  • variant (:string) - Defaults to "default".
  • size (:string) - Defaults to "default".
  • Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method"].

Slots

  • inner_block (required)

Renders a button.

Examples

All available variants:

<.button variant="default">Default</.button>
<.button variant="secondary">Secondary</.button>
<.button variant="destructive">Destructive</.button>
<.button variant="outline">Outline</.button>
<.button variant="ghost">Ghost</.button>
<.button variant="link">Link</.button>

All available sizes:

<.button size="default">Default</.button>
<.button size="sm">Small</.button>
<.button size="lg">Large</.button>
<.button size="icon">Icon</.button>

Render a default button:

<.button>Button</.button>

Render a button with icon only:

<.button variant="outline" size="icon">
  <.icon name="hero-chevron-right-mini" />
</.button>

Render a button with icon and text:

<.button>
  <.icon name="hero-chat-bubble-left" class="w-6 h-6 mr-2" /> Chat with me
</.button>

Attributes

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

Slots

  • inner_block (required)