Icon Button

در سیستم طراحی سپانو دیتا انواع Icon Button‌ها عبارتند از :

Filled Icon Button, Outlined Icon Button, Filled Tonal Button

مشخصات کلی

تمامی Icon Buttonها برای دو حالت تاریک و روشن صفحه طراحی شده‌اند.

استفاده از هر نوع از Icon Buttonها بنا به اهمیت آن‌ها است.

منابع

فایل فیگما سیستم طراحی سپانو دسترسی کامل به تمامی کامپوننت‌ها و شیوه‌نامه‌های سیستم طراحی سپانوwest

فایل لوگو سپانو دیتا دریافت لوگو رسمی و سازمانی سپانو دیتاwest

رنگ

Hex	Element
#3ECF8A	1. Cotainer
#0B1C28	2. icon
#9E9E9E	3. Container Outline
#207E51	4. icon
#207E51	5. icon

Hex	Element
#3ECF8A	1. Cotainer
#0B1C28	2. icon
#9E9E9E	3. Container Outline
#207E51	4. icon
#207E51	5. icon

حالت‌ها

چیدمان

Filled Icon Button

پیاده سازی کامپوننت Filled Icon Button در حالت Light

                                                        
<button class="sdp-btn-icon sdp-btn-filled-primary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-filled-secondary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-filled-tertiary material-symbols-outlined">settings</button>


                                                            
.sdp-btn-icon {
    padding: 8px 8px;
    border-radius: 0.313rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    border: 0;
}

.sdp-btn-filled {
    border-radius: 5px;
    border: 0;
}

.sdp-btn-filled-primary {
    background: #0A592B;
    color: #FFFFFF;
}

.sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #C0FFDA;
    color: #0A592B;
}

.sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}

.sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}


.sdp-btn-filled-secondary {
    background-color: #182F40;
    color: #ffffff;

}

.sdp-btn-filled-secondary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #DFF2FF;
    color: #182F40;
}

.sdp-btn-filled-secondary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.sdp-btn-filled-secondary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.sdp-btn-filled-tertiary {
    background-color: #015558;
    color: #FFFFFF;
}

.sdp-btn-filled-tertiary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #C2FDFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

Filled Icon Button (Dark)

پیاده سازی کامپوننت Filled Icon Button در حالت Dark

                                                        
<button class="sdp-btn-icon sdp-btn-filled-primary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-filled-secondary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-filled-tertiary material-symbols-outlined">settings</button>


                                                            
.sdp-btn-icon {
    padding: 8px 8px;
    border-radius: 0.313rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    border: 0;
}

.sdp-btn-filled {
    border-radius: 5px;
    border: 0;
}

.sdp-btn-filled-primary {
    background: #0A592B;
    color: #FFFFFF;
}

.sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #C0FFDA;
    color: #0A592B;
}

.sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}

.sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}


/* dark */
.dark .sdp-btn-filled-primary {
    background-color: #BCFFDF;
    color: #0B1C28;
}

.dark .sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #65CA9A;
    color: #0B1C28;
}

.dark .sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.dark .sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.sdp-btn-filled-secondary {
    background-color: #182F40;
    color: #ffffff;

}

.sdp-btn-filled-secondary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #DFF2FF;
    color: #182F40;
}

.sdp-btn-filled-secondary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.sdp-btn-filled-secondary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #BDDDF4;
    color: #182F40;
}

.dark .sdp-btn-filled-secondary{
    background-color: #BEE3FF;
    color: #182F40;
}

.dark .sdp-btn-filled-secondary:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #88CDFF;
    color: #182F40;
}

.dark .sdp-btn-filled-secondary:active{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #5392C0;
    color: #0B1C28;
}

.dark .sdp-btn-filled-secondary:focus{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #5392C0;
    color: #0B1C28;
}

.sdp-btn-filled-tertiary {
    background-color: #015558;
    color: #FFFFFF;
}

.sdp-btn-filled-tertiary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #C2FDFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.sdp-btn-filled-tertiary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #92FBFF;
    color: #015558;
}

.dark .sdp-btn-filled-tertiary{
    background-color: #B2EBF2;
    color: #006064;
}

.dark .sdp-btn-filled-tertiary:hover{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #80DEEA;
    color: #006064;
}

.dark .sdp-btn-filled-tertiary:active{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #6CDBEF;
    color: #006064;
}

.dark .sdp-btn-filled-tertiary:focus{
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #6CDBEF;
    color: #006064;
}

Outline Icon Button

پیاده سازی کامپوننت Outline Icon Button در حالت Light

                                                        
<button class="sdp-btn-icon sdp-btn-outlined sdp-btn-outlined-primary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-outlined sdp-btn-outlined-secondary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-outlined sdp-btn-outlined-tertiary material-symbols-outlined">settings</button>


                                                            
.sdp-btn-icon {
    padding: 8px 8px;
    border-radius: 0.313rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    border: 0;
}

.sdp-btn-outlined {
    border: 1px solid #A3A3A3 !important;
}

.sdp-btn-outlined-primary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #0A592B;
}

.sdp-btn-outlined-primary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-outlined-primary:active {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-outlined-primary:focus {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-outlined-secondary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F9FCFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:active {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:focus {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}


.sdp-btn-outlined-tertiary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F1FEFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:active {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:focus {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

Outline Icon Button (Dark)

پیاده سازی کامپوننت Outline Icon Button در حالت Dark

                                                        
<button class="sdp-btn-icon sdp-btn-outlined sdp-btn-outlined-primary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-outlined sdp-btn-outlined-secondary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-outlined sdp-btn-outlined-tertiary material-symbols-outlined">settings</button>


                                                            
.sdp-btn-icon {
    padding: 8px 8px;
    border-radius: 0.313rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    border: 0;
}                                                               
                                                                
.sdp-btn-outlined {
    border: 1px solid #A3A3A3 !important;
}

.sdp-btn-outlined-primary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #0A592B;
}

.sdp-btn-outlined-primary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-outlined-primary:active {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-outlined-primary:focus {
    border: 1px solid #0A592B;
    background-color: #DAFFE9;
    color: #0A592B;
}

.dark .sdp-btn-outlined-primary{
    border: 1px solid #BDBDBD;
    background-color: #1F1F1F;
    color: #BCFFDF;
}

.dark .sdp-btn-outlined-primary:hover{
    border: 1px solid #BDBDBD;
    background: #2c312f;
    color: #BCFFDF;
}

.dark .sdp-btn-outlined-primary:active{
    background: #23392f;
    color: #BCFFDF;
}

.dark .sdp-btn-outlined-primary:focus{
    background: #23392f;
    color: #BCFFDF;
}


.sdp-btn-outlined-secondary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F9FCFF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:active {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-outlined-secondary:focus {
    border: 1px solid #182F40;
    background-color: #ECF7FF;
    color: #182F40;
}

.dark .sdp-btn-outlined-secondary{
    border: 1px solid #BDBDBD;
    background-color: #1F1F1F;
    color: #BEE3FF;
}

.dark .sdp-btn-outlined-secondary:hover{
    border: 1px solid #BDBDBD;
    background: #2f3131;
    color: #BEE3FF;
}

.dark .sdp-btn-outlined-secondary:active{
    background: #3c3f40;
    color: #BEE3FF;
}

.dark .sdp-btn-outlined-secondary:focus{
    background: #3c3f40;
    color: #BEE3FF;
}

.sdp-btn-outlined-tertiary {
    border: 1px solid #A3A3A3;
    background-color: #FFFFFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:hover {
    border: 1px solid #A3A3A3;
    background-color: #F1FEFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:active {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-outlined-tertiary:focus {
    border: 1px solid #015558;
    background-color: #DAFDFF;
    color: #015558;
}

.dark .sdp-btn-outlined-tertiary{
    border: 1px solid #BDBDBD;
    background-color: #1F1F1F;
    color: #B2EBF2;
}

.dark .sdp-btn-outlined-tertiary:hover{
    border: 1px solid #BDBDBD;
    background: #2f3131;
    color: #B2EBF2;
}

.dark .sdp-btn-outlined-tertiary:active{
    background: #353d3e;
    color: #B2EBF2;
}

.dark .sdp-btn-outlined-tertiary:focus{
    background: #353d3e;
    color: #B2EBF2;
}

Filled Tonal Icon Button

پیاده سازی کامپوننت Filled Tonal Icon Button در حالت Light

                                                        
<button class="sdp-btn-icon sdp-btn-text sdp-btn-text-primary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-text sdp-btn-text-secondary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-text sdp-btn-text-tertiary material-symbols-outlined">settings</button>


                                                            
.sdp-btn-icon {
    padding: 8px 8px;
    border-radius: 0.313rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    border: 0;
}

.sdp-btn-text-primary {
    background-color: transparent;
    color: #0A592B;
}

.sdp-btn-text-primary:hover {
    background: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-text-primary:active {
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-text-primary:focus {
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-text-secondary {
    background-color: transparent;
    color: #182F40;
}

.sdp-btn-text-secondary:hover {
    background: #F9FCFF;
    color: #182F40;
}

.sdp-btn-text-secondary:active {
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-text-secondary:focus {
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-text-tertiary {
    background-color: transparent;
    color: #015558;
}

.sdp-btn-text-tertiary:hover {
    background: #F1FEFF;
    color: #015558;
}

.sdp-btn-text-tertiary:active {
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-text-tertiary:focus {
    background-color: #DAFDFF;
    color: #015558;
}

Filled Tonal Icon Button (Dark)

پیاده سازی کامپوننت Filled Tonal Icon Button در حالت Dark

                        
<button class="sdp-btn-icon sdp-btn-text sdp-btn-text-primary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-text sdp-btn-text-secondary material-symbols-outlined">settings</button>
<button class="sdp-btn-icon sdp-btn-text sdp-btn-text-tertiary material-symbols-outlined">settings</button>


                            
.sdp-btn-icon {
    padding: 8px 8px;
    border-radius: 0.313rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    border: 0;
}

.sdp-btn-text-primary {
    background-color: transparent;
    color: #0A592B;
}

.sdp-btn-text-primary:hover {
    background: #F3FFF8;
    color: #0A592B;
}

.sdp-btn-text-primary:active {
    background-color: #DAFFE9;
    color: #0A592B;
}

.sdp-btn-text-primary:focus {
    background-color: #DAFFE9;
    color: #0A592B;
}

.dark .sdp-btn-text-primary{
    background-color: transparent;
    color: #BCFFDF;
}

.dark .sdp-btn-text-primary:hover{
    background: #254a39;
    color: #BCFFDF;
}

.dark .sdp-btn-text-primary:active{
    background-color: #285f44;
    color: #BCFFDF;
}

.dark .sdp-btn-text-primary:focus{
    background-color: #285f44;
    color: #BCFFDF;
}

.sdp-btn-text-secondary {
    background-color: transparent;
    color: #182F40;
}

.sdp-btn-text-secondary:hover {
    background: #F9FCFF;
    color: #182F40;
}

.sdp-btn-text-secondary:active {
    background-color: #ECF7FF;
    color: #182F40;
}

.sdp-btn-text-secondary:focus {
    background-color: #ECF7FF;
    color: #182F40;
}

.dark .sdp-btn-text-secondary{
    background-color: transparent;
    color: #BEE3FF;
}

.dark .sdp-btn-text-secondary:hover{
    background: #1d262d;
    color: #BEE3FF;
}

.dark .sdp-btn-text-secondary:active{
    background-color: #1a2832;
    color: #BEE3FF;
}

.dark .sdp-btn-text-secondary:focus{
    background-color: #1a2832;
    color: #BEE3FF;
}

.sdp-btn-text-tertiary {
    background-color: transparent;
    color: #015558;
}

.sdp-btn-text-tertiary:hover {
    background: #F1FEFF;
    color: #015558;
}

.sdp-btn-text-tertiary:active {
    background-color: #DAFDFF;
    color: #015558;
}

.sdp-btn-text-tertiary:focus {
    background-color: #DAFDFF;
    color: #015558;
}

.dark .sdp-btn-text-tertiary{
    background-color: transparent;
    color: #B2EBF2;
}

.dark .sdp-btn-text-tertiary:hover{
    background: #3d4849;
    color: #B2EBF2;
}

.dark .sdp-btn-text-tertiary:active{
    background-color: #5a7174;
    color: #B2EBF2;
}

.dark .sdp-btn-text-tertiary:focus{
    background-color: #5a7174;
    color: #B2EBF2;
}

موارد استفاده

به طور کلی از Icon Buttonها برای نمایش فعالیت‌ها به صورت فشرده استفاده می‌شود. مانند عملیات ذخیره‌سازی و یا حذف یک آیتم.
این کامپوننت می‌تواند هم به صورت تکی و هم به صورت گروهی مورد استفاده قرار گیرد.

Filled Icon Button

این دسته از Icon Buttonها، دارای تاثیر بصری بیشتری هستند و هنگامی استفاده می‌شوند که فعالیت مورد نظر اهمیت بالاتری دارد.
از کامپوننت‌های Filled Icon Button هنگامی استفاده کنید که عملیات مورد نظر نیاز به تاکید بیشتری دارد. برای مثال خاموش کردن دوربین یا میکروفون.

Outlined Icon Button

این دسته از Icon Buttonها، از لحاظ تاکید و میزان اهمیت، بین دسته Filled Icon Button و Filled Tonal Icon Button قرار می‌گیرد.
این کامپوننت‌ها هنگامی استفاده می‌شوند که یک عملیات کمکی با اهمیت بالا قرار است انجام شود.

Filled Tonal Icon Button

این دسته از Icon Buttonها، زمانی کاربرد دارند که به تاکیدی کمتر از حالت‌های Filled Icon Button و Outlined Icon Button نیاز داریم .
این کامپوننت‌ها هنگامی استفاده می‌شوند که عملیات مورد نظر تاکید و اهمیت کمتری نسبت به حالت‌های قبلی دارد.