GroupCollect 1.3.142

Submit

Renders a submit button (type="submit"), ie, the HTML default.

Read more Read less

Use this when you want your button to submit a form.

The default style is primary.

Examples

<.form for={@form} phx-submit="save">
  <.submit>
    Go!
  </.submit>
</.form>
Primary (default) Open in playground 
<.submit >
  Button
</.submit>
<.submit icon="plus">
  with icon
</.submit>
<.submit icon="calendar-blank" icon_weight="bold">
  with icon
</.submit>
<.submit disabled>
  Disabled
</.submit>
<.submit disabled icon="calendar-blank">
  Disabled with icon
</.submit>
Secondary (default) Open in playground 
<.submit secondary>
  Button
</.submit>
<.submit icon="plus" secondary>
  with icon
</.submit>
<.submit icon="calendar-blank" secondary icon_weight="bold">
  with icon
</.submit>
<.submit disabled secondary>
  Disabled
</.submit>
<.submit disabled icon="calendar-blank" secondary>
  Disabled with icon
</.submit>
Ghost Open in playground 
<.submit ghost>
  Button
</.submit>
<.submit icon="plus" ghost>
  with icon
</.submit>
<.submit icon="calendar-blank" ghost icon_weight="bold">
  with icon
</.submit>
<.submit disabled ghost>
  Disabled
</.submit>
<.submit disabled icon="calendar-blank" ghost>
  Disabled with icon
</.submit>
Danger Open in playground 
<.submit danger>
  Button
</.submit>
<.submit icon="plus" danger>
  with icon
</.submit>
<.submit icon="calendar-blank" danger icon_weight="bold">
  with icon
</.submit>
<.submit disabled danger>
  Disabled
</.submit>
<.submit disabled icon="calendar-blank" danger>
  Disabled with icon
</.submit>
Danger ghost Open in playground 
<.submit ghost danger>
  Button
</.submit>
<.submit icon="plus" ghost danger>
  with icon
</.submit>
<.submit icon="calendar-blank" ghost danger icon_weight="bold">
  with icon
</.submit>
<.submit disabled ghost danger>
  Disabled
</.submit>
<.submit disabled icon="calendar-blank" ghost danger>
  Disabled with icon
</.submit>
Primary (small) Open in playground 
<.submit size="sm" primary>
  Button
</.submit>
<.submit size="sm" primary icon="plus">
  with icon
</.submit>
<.submit size="sm" primary icon="calendar-blank" icon_weight="bold">
  with icon
</.submit>
<.submit disabled size="sm" primary>
  Disabled
</.submit>
<.submit disabled size="sm" primary icon="calendar-blank">
  Disabled with icon
</.submit>
Secondary (small) Open in playground 
<.submit size="sm">
  Button
</.submit>
<.submit size="sm" icon="plus">
  with icon
</.submit>
<.submit size="sm" icon="calendar-blank" icon_weight="bold">
  with icon
</.submit>
<.submit disabled size="sm">
  Disabled
</.submit>
<.submit disabled size="sm" icon="calendar-blank">
  Disabled with icon
</.submit>
Ghost (small) Open in playground 
<.submit size="sm" ghost>
  Button
</.submit>
<.submit size="sm" icon="plus" ghost>
  with icon
</.submit>
<.submit size="sm" icon="calendar-blank" ghost icon_weight="bold">
  with icon
</.submit>
<.submit disabled size="sm" ghost>
  Disabled
</.submit>
<.submit disabled size="sm" icon="calendar-blank" ghost>
  Disabled with icon
</.submit>
Danger ghost (small) Open in playground 
<.submit size="sm" ghost danger>
  Button
</.submit>
<.submit size="sm" icon="plus" ghost danger>
  with icon
</.submit>
<.submit size="sm" icon="calendar-blank" ghost danger icon_weight="bold">
  with icon
</.submit>
<.submit disabled size="sm" ghost danger>
  Disabled
</.submit>
<.submit disabled size="sm" icon="calendar-blank" ghost danger>
  Disabled with icon
</.submit>