Concorde UI component — Form-actions. Left seats Doc ID: core/components/ui/form/form-actions/form-actions. Keywords: Concorde, supersoniks, core/components/ui/form/form-actions/form-actions, form-actions, Form-actions, UI component, form, sonic-form-actions, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/form-actions/form-actions.html.

Form-actions

Left by default

<form>
    <sonic-form-layout>
      <sonic-input label="First name"></sonic-input>
      <sonic-input label="Last name"></sonic-input>
      <sonic-form-actions>
        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
      </sonic-form-actions>
    </sonic-form-layout>
  </form >

Justify

<form>
    <sonic-form-layout>
      <sonic-input label="First name"></sonic-input>
      <sonic-input label="Last name"></sonic-input>
      <sonic-form-actions justify="flex-end">
        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
      </sonic-form-actions>
    </sonic-form-layout>
  </form >

Direction

<form>
    <sonic-form-layout>
      <sonic-input label="First name"></sonic-input>
      <sonic-input label="Last name"></sonic-input>
      <sonic-form-actions direction="row-reverse">
        <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button> 
        <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon>  Cancel</sonic-button> 
      </sonic-form-actions>
    </sonic-form-layout>
  </form >

Center

<form>
    <sonic-form-layout>
      <sonic-input label="First name"></sonic-input>
      <sonic-input label="Last name"></sonic-input>
      <sonic-form-actions justify="center" >
        <sonic-button type="info" minWidth="12rem">
          <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
          Left seats
        </sonic-button> 
        <sonic-divider vertical></sonic-divider>
        <sonic-button type="info" minWidth="12rem">
          <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
          Right seats
        </sonic-button> 
      </sonic-form-actions>
    </sonic-form-layout>
  </form >