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 variánsok réteg két gradienst — egy padding-box kitöltés és egy border-box stroke — azok kereteihez, és -color-ai-secondary nem lehet festeni gradiens szöveg és egy kitöltés egyszerre, így a központ átlátszó marad pihenő és kitölt lebegésen vagy aktív. Ghost lebegés és aktív levezetelik alacsony átlátszatlansággal, kissé sötétített márka mosásból ahelyett, hogy az nyers lebegésű háttér tokeneket használnák, amely ugyanolyan szín szöveget nyomtatna.
Forrás: button.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 |
|---|---|
: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> | light-dark(#CFF0F6, #00424A)LightDark |
--instui-color-background-interactive-action-ai-secondary-active-top-gradient | <color> | light-dark(#F3E5F7, #522965)LightDark |
--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient | <color> | light-dark(#CFF0F6, #00424A)LightDark |
--instui-color-background-interactive-action-ai-secondary-hover-top-gradient | <color> | light-dark(#F3E5F7, #522965)LightDark |
--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> | light-dark(#061C30, #D5E2F6)LightDark |
--instui-color-background-interactive-action-primary-base | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-color-background-interactive-action-primary-disabled | <color> | light-dark(#DFE1E3, #334450)LightDark |
--instui-color-background-interactive-action-primary-hover | <color> | light-dark(#234465, #ffffff)LightDark |
--instui-color-background-interactive-action-secondary-active | <color> | light-dark(#B6CCEA, #2E5177)LightDark |
--instui-color-background-interactive-action-secondary-base | <color> | light-dark(#D5E2F6, #345B84)LightDark |
--instui-color-background-interactive-action-secondary-hover | <color> | light-dark(#E2EAF7, #3E6895)LightDark |
--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> | light-dark(#E2EAF7, #234465)LightDark |
--instui-color-background-interactive-action-tertiary-hover | <color> | light-dark(#EEF4FD, #2E5177)LightDark |
--instui-color-background-muted | <color> | light-dark(#F2F4F5, #273540)LightDark |
--instui-color-stroke-interactive-action-ai-bottom-gradient-active | <color> | light-dark(#01626E, #02717E)LightDark |
--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> | light-dark(#793F93, #8A49A7)LightDark |
--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> | light-dark(#B6CCEA, #2E5177)LightDark |
--instui-color-stroke-interactive-action-secondary-base | <color> | light-dark(#D5E2F6, #345B84)LightDark |
--instui-color-stroke-interactive-action-secondary-hover | <color> | light-dark(#E2EAF7, #3E6895)LightDark |
--instui-color-stroke-interactive-action-tertiary-base | <color> | light-dark(#86A8D5, #7097C7)LightDark |
--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> | light-dark(#027887, #3CC0D4)LightDark |
--instui-color-text-interactive-action-ai-secondary-top-gradient-base | <color> | light-dark(#944FB3, #CAA1D9)LightDark |
--instui-color-text-interactive-action-primary-base | <color> | light-dark(#ffffff, #1D354F)LightDark |
--instui-color-text-interactive-action-primary-disabled | <color> | light-dark(#9EA6AD, #6A7883)LightDark |
--instui-color-text-interactive-action-secondary-base | <color> | light-dark(#1D354F, #ffffff)LightDark |
--instui-color-text-interactive-action-status-base | <color> | #ffffff |
--instui-color-text-interactive-action-tertiary-base | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--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> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-base-button-primary-ghost-color | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--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> | light-dark(#1D354F, #ffffff)LightDark |
--instui-component-base-button-secondary-ghost-color | <color> | light-dark(#1D354F, #ffffff)LightDark |
--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.