Skip to main content

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>