Action Buttons (+Babel)
Props#
group#
Note: Default is false
.
Example#
<ActionButton group>
<ActionButtonItem icon="search" />
<ActionButtonItem icon="search">یه چیزی اینجا</ActionButtonItem>
<ActionButtonItem isSelected icon="search">
یه چیزی اینجا
</ActionButtonItem>
</ActionButton>
<div class='buttons-group'>
<button class='vg-btn action-btn'>
<span class='icon-search'></span>
<span class='label'>یه چیزی اینجا</span>
</button>
<button class='vg-btn action-btn is-selected'>
<span class='icon-search'></span>
<span class='label'>یه چیزی اینجا</span>
</button>
<button class='vg-btn action-btn'>
<span class='icon-search'></span>
</button>
</div>
size#
Note: Default size: md
.
Example#
sm
md
lg
xl
sm
md
lg
xl
// React Components
<ActionButton size="sm">ویرایش</ActionButton>
<ActionButton size="sm" icon="edit">ویرایش</ActionButton>
<ActionButton size="sm" icon="edit" />
<ActionButton size="md">ویرایش</ActionButton>
<ActionButton size="md" icon="edit">ویرایش</ActionButton>
<ActionButton size="md" icon="edit" />
<ActionButton size="lg">ویرایش</ActionButton>
<ActionButton size="lg" icon="edit">ویرایش</ActionButton>
<ActionButton size="lg" icon="edit" />
<ActionButton size="xl">ویرایش</ActionButton>
<ActionButton size="xl" icon="edit">ویرایش</ActionButton>
<ActionButton size="xl" icon="edit" />
// Babel
<button class="vg-btn action-btn action-btn-sm">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn action-btn-sm">
<span class="icon-edit"></span>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn action-btn-sm">
<span class="icon-edit"></span>
</button>
<button class="vg-btn action-btn action-btn-md">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn action-btn-md">
<span class="icon-edit"></span>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn action-btn-md">
<span class="icon-edit"></span>
</button>
<button class="vg-btn action-btn action-btn-lg">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn action-btn-lg">
<span class="icon-edit"></span>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn action-btn-lg">
<span class="icon-edit"></span>
</button>
<button class="vg-btn action-btn action-btn-xl">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn action-btn-xl">
<span class="icon-edit"></span>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn action-btn-xl">
<span class="icon-edit"></span>
</button>
standard#
Note 1: Standard style is default of all action buttons.
Example#
standard
selected
disabled
standard+icon
icon
standard
selected
disabled
standard+icon
icon
// React Components
<ActionButton>ویرایش</ActionButton>
<ActionButton isSelected>ویرایش</ActionButton>
<ActionButton disabled>ویرایش</ActionButton>
<ActionButton icon="edit">ویرایش</ActionButton>
<ActionButton icon="edit" />
// Babel
<button class="vg-btn action-btn">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn is-selected">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn" disabled>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn">
<span class="icon-edit"></span>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn">
<span class="icon-edit"></span>
</button>
quiet#
Note 1: Default is false
.
Example#
quiet
selected
disabled
quiet+icon
icon
quiet
selected
disabled
quiet+icon
icon
// React Components
<ActionButton quiet>ویرایش</ActionButton>
<ActionButton quiet isSelected>ویرایش</ActionButton>
<ActionButton quiet disabled>ویرایش</ActionButton>
<ActionButton quiet icon="edit">ویرایش</ActionButton>
<ActionButton quiet icon="edit" />
// Babel
<button class="vg-btn action-btn quiet">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn quiet is-selected">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn quiet" disabled>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn quiet">
<span class="icon-edit"></span>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn quiet">
<span class="icon-edit"></span>
</button>
emphasized#
Note 1: Default is false
.
Example#
emphasized
selected
disabled
emphasized+icon
icon
emphasized
selected
disabled
emphasized+icon
icon
// React Components
<ActionButton emphasized>ویرایش</ActionButton>
<ActionButton emphasized isSelected>ویرایش</ActionButton>
<ActionButton emphasized disabled>ویرایش</ActionButton>
<ActionButton emphasized icon="edit">ویرایش</ActionButton>
<ActionButton emphasized icon="edit" />
// Babel
<button class="vg-btn action-btn emphasized">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn emphasized is-selected">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn emphasized" disabled>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn emphasized">
<span class="icon-edit"></span>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn emphasized">
<span class="icon-edit"></span>
</button>
emphasized + quiet#
Note 1: Default is false
.
Example#
emphasized+quiet
selected
disabled
emphasized+quiet+icon
icon
emphasized+quiet
selected
disabled
emphasized+quiet+icon
icon
// React Components
<ActionButton emphasized quiet>ویرایش</ActionButton>
<ActionButton emphasized quiet isSelected>ویرایش</ActionButton>
<ActionButton emphasized quiet disabled>ویرایش</ActionButton>
<ActionButton emphasized quiet icon="edit">ویرایش</ActionButton>
<ActionButton emphasized quiet icon="edit" />
// Babel
<button class="vg-btn action-btn emphasized quiet">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn emphasized quiet is-selected">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn emphasized quiet" disabled>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn emphasized quiet">
<span class="icon-edit"></span>
<span class="label">ویرایش</span>
</button>
<button class="vg-btn action-btn emphasized quiet">
<span class="icon-edit"></span>
</button>