Are you an LLM? You can read better optimized documentation at /hu/api/css/button.md for this page in Markdown format
CSS: button
.instui-button — Egy elérhető cselekvés vezérlő, stílusozva a token palettáról; alapértelmezetten elsődleges.
Az AI-változatok két színátmenetet rétegeznek a keretükhöz – egy padding-box kitöltést és egy border-box körvonalat –, és a(z) -color-ai-secondary nem tud egyszerre színátmenetes szöveget és kitöltést rajzolni, így a közepe nyugalmi állapotban átlátszó marad, hover vagy active állapotban pedig kitöltődik. A Ghost hover és active állapotok egy alacsony átlátszatlanságú, kissé sötétített márka-tónust származtatnak a nyers hover-background tokenek használata helyett, amelyek azonos színű szöveget jelenítenének meg azonos színű háttéren. Továbbá beállítja a saját ikon/címke gap és vízszintes padding értékét; egy -gap-*/-p-*/-padding-* térköz-segédmódosító hozzáfűzése felülbírálja ezeket a beépített értékeket.
Forrás: index.ts
Akadálymentesség
Irányítsa a -toggle variáns nyomott állapotát a aria-pressed-vel, és jelölje meg a letiltott gombat a aria-disabled-vel (vagy a natív disabled).
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/button.css";Demó
Példák
html
<button class="instui-button">Primary</button>Módosítók
| Módosító | Leírás |
|---|---|
.-color-ai | Egy mesterséges intelligencia cselekvés. |
.-color-ai-secondary | Egy alacsonyabb hangsúly mesterséges intelligencia cselekvés. |
.-color-danger | Egy destruktív cselekvés. |
.-color-primary-inverse | Elsődleges cselekvés sötét háttereknél. |
.-color-secondary | Egy alacsonyabb hangsúly másodlagos cselekvés. |
.-color-success | Egy pozitív/megerősítő cselekvés. |
.-color-tertiary | Egy szöveg-stílus cselekvés (nincs kitöltés vagy határ, amíg lebegés). |
.-condensed | Szűkebb párnázás sűrű eszköztárak. |
.-display-block | Teljes szélesség blokk gomb. |
.-ghost | Vázlat (szellem) stílus: egy határ a szín szellem tokenekben, nincs kitöltés. |
.-icon-* | Rendereljen egy glifát az ikonkészletből a címke előtt (pl. -icon-arrow-right), a gomb szövegszínével festve; párosítson -shape-square/-shape-circle elemekkel csak ikon gombhoz. |
.-shape-circle | Egy kerek ikon gomb. |
.-shape-square | Egy négyzet alakú ikon gomb. |
.-size-large | Nagy. Hosszú forma alias a -size-lg. |
.-size-lg | Nagy. |
.-size-sm | Kicsi. |
.-size-small | Kicsi. Hosszú forma alias a -size-sm. |
.-toggle | Egy lenyomott állapotú váltógomb (aria-pressed attribútummal vezérelve). |
.-without-background | Vegye le a kitöltést (szellem). |
.-without-border | Távolítsa el a szegélyt. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::after | Az AI-másodlagos gradiens szegély gyűrű, csak a gomb keretére maszkozva. |
::before | Az AI glifa, amely automatikusan hozzáadódik az AI gombokhoz és a variáns saját színében maszkozva. |
Állapotok
| Állapot | Leírás |
|---|---|
[aria-disabled="true"] | — |
[aria-pressed="true"] | — |
:disabled | — |
:state(pressed) | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-border-width-md | <length> | 0.125rem |
--instui-border-width-sm | <length> | 0.0625rem |
--instui-color-background-interactive-action-ai-bottom-gradient-active | <color> | #01626E |
--instui-color-background-interactive-action-ai-bottom-gradient-base | <color> | #027887 |
--instui-color-background-interactive-action-ai-bottom-gradient-hover | <color> | #00828E |
--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient | <color> | LightDarklight-dark(#CFF0F6, #00424A) |
--instui-color-background-interactive-action-ai-secondary-active-top-gradient | <color> | LightDarklight-dark(#F3E5F7, #522965) |
--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient | <color> | LightDarklight-dark(#CFF0F6, #00424A) |
--instui-color-background-interactive-action-ai-secondary-hover-top-gradient | <color> | LightDarklight-dark(#F3E5F7, #522965) |
--instui-color-background-interactive-action-ai-top-gradient-active | <color> | #793F93 |
--instui-color-background-interactive-action-ai-top-gradient-base | <color> | #944FB3 |
--instui-color-background-interactive-action-ai-top-gradient-hover | <color> | #9E58BD |
--instui-color-background-interactive-action-destructive-active | <color> | #AE161B |
--instui-color-background-interactive-action-destructive-base | <color> | #CF1F24 |
--instui-color-background-interactive-action-destructive-hover | <color> | #E62429 |
--instui-color-background-interactive-action-primary-active | <color> | LightDarklight-dark(#061C30, #D5E2F6) |
--instui-color-background-interactive-action-primary-base | <color> | LightDarklight-dark(#1D354F, #EEF4FD) |
--instui-color-background-interactive-action-primary-disabled | <color> | LightDarklight-dark(#DFE1E3, #334450) |
--instui-color-background-interactive-action-primary-hover | <color> | LightDarklight-dark(#234465, #ffffff) |
--instui-color-background-interactive-action-secondary-active | <color> | LightDarklight-dark(#44709F, #2E5177) |
--instui-color-background-interactive-action-secondary-base | <color> | LightDarklight-dark(#44709F, #345B84) |
--instui-color-background-interactive-action-secondary-hover | <color> | LightDarklight-dark(#44709F, #3E6895) |
--instui-color-background-interactive-action-success-base | <color> | #037D37 |
--instui-color-background-interactive-action-success-hover | <color> | #03893D |
--instui-color-background-interactive-action-tertiary-active | <color> | LightDarklight-dark(#E2EAF7, #234465) |
--instui-color-background-interactive-action-tertiary-hover | <color> | LightDarklight-dark(#EEF4FD, #2E5177) |
--instui-color-background-muted | <color> | LightDarklight-dark(#F2F4F5, #273540) |
--instui-color-stroke-interactive-action-ai-bottom-gradient-active | <color> | LightDarklight-dark(#01626E, #02717E) |
--instui-color-stroke-interactive-action-ai-bottom-gradient-base | <color> | #027887 |
--instui-color-stroke-interactive-action-ai-bottom-gradient-hover | <color> | #00828E |
--instui-color-stroke-interactive-action-ai-top-gradient-active | <color> | LightDarklight-dark(#793F93, #8A49A7) |
--instui-color-stroke-interactive-action-ai-top-gradient-base | <color> | #944FB3 |
--instui-color-stroke-interactive-action-ai-top-gradient-hover | <color> | #9E58BD |
--instui-color-stroke-interactive-action-secondary-active | <color> | LightDarklight-dark(#44709F, #2E5177) |
--instui-color-stroke-interactive-action-secondary-base | <color> | LightDarklight-dark(#44709F, #345B84) |
--instui-color-stroke-interactive-action-secondary-hover | <color> | LightDarklight-dark(#44709F, #3E6895) |
--instui-color-stroke-interactive-action-tertiary-base | <color> | LightDarklight-dark(#86A8D5, #7097C7) |
--instui-color-text-interactive-action-ai-active | <color> | #ffffff |
--instui-color-text-interactive-action-ai-base | <color> | #ffffff |
--instui-color-text-interactive-action-ai-hover | <color> | #ffffff |
--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base | <color> | LightDarklight-dark(#027887, #3CC0D4) |
--instui-color-text-interactive-action-ai-secondary-top-gradient-base | <color> | LightDarklight-dark(#944FB3, #CAA1D9) |
--instui-color-text-interactive-action-primary-base | <color> | LightDarklight-dark(#ffffff, #1D354F) |
--instui-color-text-interactive-action-primary-disabled | <color> | LightDarklight-dark(#9EA6AD, #6A7883) |
--instui-color-text-interactive-action-secondary-base | <color> | LightDarklight-dark(#1D354F, #ffffff) |
--instui-color-text-interactive-action-status-base | <color> | #ffffff |
--instui-color-text-interactive-action-tertiary-base | <color> | LightDarklight-dark(#1D354F, #EEF4FD) |
--instui-component-base-button-border-radius | <length> | 0.75rem |
--instui-component-base-button-large-font-size | <length> | 1.125rem |
--instui-component-base-button-large-height | <length> | 3rem |
--instui-component-base-button-large-padding-horizontal | <length> | 1.25rem |
--instui-component-base-button-medium-font-size | <length> | 1rem |
--instui-component-base-button-medium-height | <length> | 2.5rem |
--instui-component-base-button-medium-padding-horizontal | <length> | 1rem |
--instui-component-base-button-primary-ghost-background | <color> | transparent |
--instui-component-base-button-primary-ghost-border-color | <color> | LightDarklight-dark(#1D354F, #EEF4FD) |
--instui-component-base-button-primary-ghost-color | <color> | LightDarklight-dark(#1D354F, #EEF4FD) |
--instui-component-base-button-primary-inverse-active-background | <color> | #B6CCEA |
--instui-component-base-button-primary-inverse-background | <color> | #ffffff |
--instui-component-base-button-primary-inverse-border-color | <color> | #ffffff |
--instui-component-base-button-primary-inverse-color | <color> | #213D5B |
--instui-component-base-button-primary-inverse-hover-background | <color> | #D5E2F6 |
--instui-component-base-button-primary-on-color-active-border-color | <color> | #B6CCEA |
--instui-component-base-button-primary-on-color-hover-border-color | <color> | #D5E2F6 |
--instui-component-base-button-secondary-ghost-background | <color> | transparent |
--instui-component-base-button-secondary-ghost-border-color | <color> | LightDarklight-dark(#1D354F, #ffffff) |
--instui-component-base-button-secondary-ghost-color | <color> | LightDarklight-dark(#1D354F, #ffffff) |
--instui-component-base-button-small-font-size | <length> | 0.875rem |
--instui-component-base-button-small-height | <length> | 2rem |
--instui-component-base-button-small-padding-horizontal | <length> | 0.75rem |
--instui-font-family-base | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-font-weight-interactive | <integer> | 500 |
--instui-line-height-standalone-text-base | <length> | 1rem |
--instui-spacing-space-xs | <length> | 0.25rem |
Kapcsolódó
- close-button — Csak az ikon figyelmen kívül hagyása gomb.