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>