Skip to main content

Buttons (+Babel)

Button React Component#

Example#



//React Components
<Button type="cta" size="md">ویرایش</Button>
<Button type="primary" size="md">ویرایش</Button>
<Button type="primary-quiet" size="md">ویرایش</Button>
<Button type="secondary" size="md">ویرایش</Button>
<Button type="secondary-quiet" size="md">ویرایش</Button>
<Button type="negative" size="md">ویرایش</Button>
<Button type="negative-quiet" size="md">ویرایش</Button>
<Button type="over-bg" size="md">ویرایش</Button>
<Button type="over-bg-quiet" size="md">ویرایش</Button>
<Button type="cta-green" size="md">ویرایش</Button>
// Babel
<button class="vg-btn vg-btn-md vg-btn-cta">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-primary">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-primary-quiet">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-secondary">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-secondary-quiet">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-negative">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-negative-quiet">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-over-bg">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-over-bg-quiet">
<span class="label">ویرایش</span>
</button>
<button class="vg-btn vg-btn-md vg-btn-cta-green">
<span class="label">ویرایش</span>
</button>

Sizing#



<Button type="cta" size='sm'>ویرایش</Button>
<Button type="cta" size='md'>ویرایش</Button>
<Button type="cta" size='lg'>ویرایش</Button>
<Button type="cta" size='xl'>ویرایش</Button>

Example + Icon#



// React Components
<Button icon="trumpet" type="cta" size="md">ویرایش</Button>
<Button icon="trumpet" type="primary" size="md">ویرایش</Button>
<Button icon="trumpet" type="primary-quiet" size="md">ویرایش</Button>
<Button icon="trumpet" type="secondary" size="md">ویرایش</Button>
<Button icon="trumpet" type="secondary-quiet" size="md">ویرایش</Button>
<Button icon="trumpet" type="negative" size="md">ویرایش</Button>
<Button icon="trumpet" type="negative-quiet" size="md">ویرایش</Button>
<Button icon="trumpet" type="over-bg" size="md">ویرایش</Button>
<Button icon="trumpet" type="over-bg-quiet" size="md">ویرایش</Button>
<Button icon="trumpet" type="cta-green" size="md">ویرایش</Button>
// Babel
<button className="vg-btn vg-btn-md vg-btn-cta vg-btn-icon">
<span className="icon-trumpet vg-btn-cta-icon"></span>
<span className="label">ویرایش</span>
</button>
<button className="vg-btn vg-btn-md vg-btn-primary vg-btn-icon">
<span className="label">ویرایش</span>
<span className="icon-trumpet vg-btn-primary-icon"></span>
</button>

Sizing + Icon#



// React Components
<Button type="cta" size='sm'>ویرایش</Button>
<Button type="cta" size='md'>ویرایش</Button>
<Button type="cta" size='lg'>ویرایش</Button>
<Button type="cta" size='xl'>ویرایش</Button>
// Babel
<button className="vg-btn vg-btn-sm vg-btn-cta vg-btn-icon">
<span className="icon-trumpet vg-btn-cta-icon"></span>
<span className="label">ویرایش</span>
</button>
<button className="vg-btn vg-btn-md vg-btn-cta vg-btn-icon">
<span className="icon-trumpet vg-btn-cta-icon"></span>
<span className="label">ویرایش</span>
</button>
<button className="vg-btn vg-btn-lg vg-btn-cta vg-btn-icon">
<span className="icon-trumpet vg-btn-cta-icon"></span>
<span className="label">ویرایش</span>
</button>
<button className="vg-btn vg-btn-xl vg-btn-cta vg-btn-icon">
<span className="icon-trumpet vg-btn-cta-icon"></span>
<span className="label">ویرایش</span>
</button>