Erb3/ui

Appearance

Buttons ​

A button is something you can click.

Standard ​

js
<Button><BookmarkIcon /> Save</Button>
<Button color="primary"><UploadIcon /> Upload</Button>
<Button color="secondary"><PlusIcon /> Create new instance</Button>
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
<Button color="danger"><TrashIcon /> Delete</Button>
<Button><BookmarkIcon /> Save</Button>
<Button color="primary"><UploadIcon /> Upload</Button>
<Button color="secondary"><PlusIcon /> Create new instance</Button>
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
<Button color="danger"><TrashIcon /> Delete</Button>

Large ​

js
<Button color="primary" large><DownloadIcon /> Download</Button>
<Button color="blue" large><ServerIcon /> Host a Server</Button>
<Button color="purple" large><HeartIcon /> Donate</Button>
<Button color="primary" large><DownloadIcon /> Download</Button>
<Button color="blue" large><ServerIcon /> Host a Server</Button>
<Button color="purple" large><HeartIcon /> Donate</Button>

Outline ​

js
<Button color="primary" outline><DownloadIcon/> Download the App</Button>
<Button color="red" outline><ReportIcon /> Report project</Button>
<Button color="primary" outline><DownloadIcon/> Download the App</Button>
<Button color="red" outline><ReportIcon /> Report project</Button>

Transparent ​

js
<Button transparent><IssuesIcon /> Report issues</Button>
<Button transparent><CodeIcon /> View sources</Button>
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
<Button transparent><IssuesIcon /> Report issues</Button>
<Button transparent><CodeIcon /> View sources</Button>
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>

Hover-filled ​

js
<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>

Hover-filled-only ​

js
<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>

Icon-only ​

js
<Button icon-only><HeartIcon /></Button>
<Button icon-only><XIcon /></Button>
<Button icon-only><MoreHorizontalIcon /></Button>
<Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></Button>
<Button icon-only><HeartIcon /></Button>
<Button icon-only><XIcon /></Button>
<Button icon-only><MoreHorizontalIcon /></Button>
<Button icon-only transparent><SunIcon /></Button>
<Button icon-only transparent><DropdownIcon /></Button>

Joined buttons ​

js
<div class="joined-buttons">
  <Button color="primary"><UploadIcon /> Upload</Button>
  <OverflowMenu :options="[
  {
    'id': 'import',
    'action': () => {},
  },
  {
    'id': 'edit',
    'action': () => {}
  }
]" class="btn btn-primary btn-dropdown-animation icon-only">
    <DropdownIcon />
    <template #import>
      <ImportIcon /> Import
    </template>
    <template #edit>
      <EditIcon /> Edit
    </template>
  </OverflowMenu>
</div>
<div class="joined-buttons">
  <Button color="primary"><UploadIcon /> Upload</Button>
  <OverflowMenu :options="[
  {
    'id': 'import',
    'action': () => {},
  },
  {
    'id': 'edit',
    'action': () => {}
  }
]" class="btn btn-primary btn-dropdown-animation icon-only">
    <DropdownIcon />
    <template #import>
      <ImportIcon /> Import
    </template>
    <template #edit>
      <EditIcon /> Edit
    </template>
  </OverflowMenu>
</div>