CSS: button

.instui-button — Έλεγχος ενέργειας προσβάσιμος, σχεδιασμένος από την παλέτα tokens· προεπιλεγμένο primary.

Τα παραλλαγμένα AI εφαρμόζουν δύο διαβαθμίσεις — ένα γέμισμα padding-box και ένα stroke border-box — για το πλαίσιο τους, και το -color-ai-secondary δεν μπορεί να ζωγραφίσει ταυτόχρονα κείμενο με διαβάθμιση και γέμισμα, οπότε το κέντρο του παραμένει διαφανές σε ηρεμία και γεμίζει στο hover ή στο active. Τα hover και active του -without-background απορροούν ένα χαμηλής αδιαφάνειας, ελαφρώς σκουρότερο brand wash αντί για τα ωμά hover-background tokens, τα οποία θα έκαναν κείμενο ίδιου χρώματος πάνω σε ίδιο χρώμα. Επίσης ορίζει το δικό του icon/label gap και οριζόντιο padding; η αλυσιδωτή εφαρμογή ενός -gap-*/-p-*/-padding-* utility modifier για το spacing υπερισχύει αυτών των ενσωματωμένων τιμών. Ο προαιρετικός wrapper .instui-button-group χαρτογραφεί τα Figma .buttonGroup και διαχειρίζεται το διπλανό button spacing.

Source: button.css

Προσβασιμότητα

Καθοδηγήστε την κατάσταση pressed της παραλλαγής -toggle με aria-pressed, και σημειώστε ένα απενεργοποιημένο κουμπί με aria-disabled (ή με το εγγενές disabled).

Χρήση

css

@import "@pantoken/components/components.css";
@import "@pantoken/components/button.css";

Παράδειγμα επίδειξης

Παραδείγματα

html

<div class="instui-button-group">
  <button class="instui-button">Primary</button>
  <button class="instui-button -color-secondary">Secondary</button>
</div>

Δομή

Ένας group wrapper τοποθετεί τα διπλανά κουμπιά με το κοινό κενό μεταξύ κουμπιών.

text

.instui-button-group (0..1)
  .instui-button (1..n)

flowchart TD n0[".instui-button-group (0..1)"]:::cssdoc-root n1(".instui-button"):::cssdoc-part n0 -->|1..n| n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Τροποποιητές

Τροποποιητής	Περιγραφή
`.-color-ai`	Μία ενέργεια AI.
`.-color-ai-secondary`	Μία ενέργεια AI με χαμηλότερη έμφαση.
`.-color-danger`	Μία καταστροφική ενέργεια.
`.-color-primary`	(προεπιλογή) η κύρια ενέργεια.
`.-color-primary-inverse`	Καταργημένο — use `.-on-color`.
`.-color-secondary`	Μία δεύτερη ενέργεια με χαμηλότερη έμφαση.
`.-color-success`	Μία θετική/επιβεβαιωτική ενέργεια.
`.-color-tertiary`	Μία ενέργεια σε στυλ κειμένου (χωρίς γέμισμα ή περίγραμμα έως ότου γίνει hover).
`.-condensed`	Σφικτότερη εσωτερική απόσταση για πυκνές γραμμές εργαλείων.
`.-display-block`	Κουμπί μπλοκ πλήρους πλάτους.
`.-ghost`	Καταργημένο — use `.-color-tertiary`.
`.-icon-*`	Απεικονίστε ένα γλυφικό από το σύνολο εικονιδίων πριν από την ετικέτα (π.χ. `-icon-arrow-right`), βαμμένο στο χρώμα κειμένου του κουμπιού· συνδυάστε με `-shape-square`/`-shape-circle` για κουμπί μόνο με εικονίδιο.
`.-on-color`	Για κουμπί τοποθετημένο σε έγχρωμη (μη ουδέτερη) επιφάνεια. Σε συνδυασμό με `-color-primary` (προεπιλογή) γεμίζει λευκό με σκούρο κείμενο· σε συνδυασμό με `-color-secondary` παραμένει διαφανές με λευκό περίγραμμα και λευκό κείμενο.
`.-shape-circle`	Στρογγυλό κουμπί εικονιδίου.
`.-shape-square`	Τετράγωνο κουμπί εικονιδίου.
`.-size-large`	Μεγάλο. Μακροσκελής συνώνυμο του `-size-lg`.
`.-size-lg`	Μεγάλο.
`.-size-md`	(προεπιλογή) μεσαίο μέγεθος.
`.-size-medium`	(προεπιλογή) μεσαίο μέγεθος. Μακροσκελής συνώνυμη ονομασία του `-size-md`.
`.-size-sm`	Μικρό.
`.-size-small`	Μικρό. Μακροσκελής συνώνυμο του `-size-sm`.
`.-toggle`	Κουμπί toggle με κατάσταση pressed (οδηγείται με aria-pressed).
`.-without-background`	Αφαιρέστε το γέμισμα (ghost).
`.-without-border`	Αφαιρέστε το περίγραμμα.

Ψευδοστοιχεία

Ψευδοστοιχείο	Περιγραφή
`::after`	Ο δακτύλιος περιγράμματος AI-secondary gradient, μάσκαρισμένος ώστε να καλύπτει μόνο το πλαίσιο του κουμπιού.
`::before`	Το γλυφικό AI, προσαυξημένο αυτόματα στα AI κουμπιά και μάσκαρισμένο στο χρώμα της ίδιας της παραλλαγής.

Καταστάσεις

Κατάσταση	Περιγραφή
`[aria-disabled="true"]`	—
`[aria-pressed="true"]`	—
`:disabled`	—
`:state(pressed)`	—

Καταναλωμένα tokens

Token	Τύπος	Τιμή
`--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>`	LightDark`light-dark(#CFF0F6, #00424A)`
`--instui-color-background-interactive-action-ai-secondary-active-top-gradient`	`<color>`	LightDark`light-dark(#F3E5F7, #522965)`
`--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient`	`<color>`	LightDark`light-dark(#CFF0F6, #00424A)`
`--instui-color-background-interactive-action-ai-secondary-hover-top-gradient`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-background-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-background-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-background-interactive-action-secondary-active`	`<color>`	LightDark`light-dark(#44709F, #2E5177)`
`--instui-color-background-interactive-action-success-base`	`<color>`	`#037D37`
`--instui-color-background-interactive-action-success-hover`	`<color>`	`#03893D`
`--instui-color-background-muted`	`<color>`	LightDark`light-dark(#F2F4F5, #273540)`
`--instui-color-stroke-interactive-action-ai-bottom-gradient-active`	`<color>`	LightDark`light-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>`	LightDark`light-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-primary-active`	`<color>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-stroke-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-stroke-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-stroke-interactive-action-secondary-active`	`<color>`	LightDark`light-dark(#44709F, #2E5177)`
`--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>`	LightDark`light-dark(#027887, #3CC0D4)`
`--instui-color-text-interactive-action-ai-secondary-top-gradient-base`	`<color>`	LightDark`light-dark(#944FB3, #CAA1D9)`
`--instui-color-text-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#ffffff, #1D354F)`
`--instui-color-text-interactive-action-secondary-base`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-color-text-interactive-action-status-base`	`<color>`	`#ffffff`
`--instui-component-base-button-ai-disabled-background-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-ai-disabled-border-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-ai-disabled-text-color`	`<color>`	LightDark`light-dark(#9EA6AD, #6A7883)`
`--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-color`	`<color>`	LightDark`light-dark(#ffffff, #1D354F)`
`--instui-component-base-button-primary-disabled-background-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-primary-disabled-border-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-primary-ghost-active-background`	`<color>`	LightDark`light-dark(#1D354F33, rgba(255,255,255,0.1))`
`--instui-component-base-button-primary-ghost-background`	`<color>`	`transparent`
`--instui-component-base-button-primary-ghost-border-color`	`<color>`	LightDark`light-dark(#1D354F66, #EEF4FD)`
`--instui-component-base-button-primary-ghost-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-primary-ghost-hover-background`	`<color>`	LightDark`light-dark(#1D354F1A, rgba(255,255,255,0.1))`
`--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-ghost-active-background`	`<color>`	`rgba(255,255,255,0.1)`
`--instui-component-base-button-primary-inverse-ghost-border-color`	`<color>`	`#ffffff`
`--instui-component-base-button-primary-inverse-ghost-color`	`<color>`	`#ffffff`
`--instui-component-base-button-primary-inverse-ghost-hover-background`	`<color>`	`rgba(255,255,255,0.1)`
`--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-active-text-color`	`<color>`	`#213D5B`
`--instui-component-base-button-primary-on-color-disabled-background-color`	`<color>`	`#8D959F`
`--instui-component-base-button-primary-on-color-disabled-border-color`	`<color>`	`#8D959F`
`--instui-component-base-button-primary-on-color-disabled-text-color`	`<color>`	`#4A5B68`
`--instui-component-base-button-primary-on-color-hover-border-color`	`<color>`	`#D5E2F6`
`--instui-component-base-button-primary-on-color-hover-text-color`	`<color>`	`#213D5B`
`--instui-component-base-button-secondary-active-background`	`<color>`	LightDark`light-dark(#3D658F33, #86A8D5)`
`--instui-component-base-button-secondary-active-border-color`	`<color>`	LightDark`light-dark(#44709F00, #86A8D5)`
`--instui-component-base-button-secondary-active-text-color`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-component-base-button-secondary-background`	`<color>`	LightDark`light-dark(#44709F33, #86A8D5)`
`--instui-component-base-button-secondary-border-color`	`<color>`	LightDark`light-dark(#44709F00, #86A8D5)`
`--instui-component-base-button-secondary-color`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-component-base-button-secondary-disabled-background-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-secondary-disabled-border-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-secondary-disabled-text-color`	`<color>`	LightDark`light-dark(#9EA6AD, #6A7883)`
`--instui-component-base-button-secondary-hover-background`	`<color>`	LightDark`light-dark(#4D7EB333, #86A8D5)`
`--instui-component-base-button-secondary-hover-border-color`	`<color>`	LightDark`light-dark(#44709F00, #86A8D5)`
`--instui-component-base-button-secondary-hover-text-color`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-component-base-button-secondary-on-color-active-border-color`	`<color>`	`#B6CCEA`
`--instui-component-base-button-secondary-on-color-active-text-color`	`<color>`	`#ffffff`
`--instui-component-base-button-secondary-on-color-disabled-border-color`	`<color>`	`#8D959F`
`--instui-component-base-button-secondary-on-color-disabled-text-color`	`<color>`	`#9EA6AD`
`--instui-component-base-button-secondary-on-color-hover-text-color`	`<color>`	`#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-component-base-button-tertiary-active-border-color`	`<color>`	LightDark`light-dark(#1D354F4D, #EEF4FD)`
`--instui-component-base-button-tertiary-active-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-tertiary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-tertiary-disabled-text-color`	`<color>`	LightDark`light-dark(#AAB0B5, #4A5B68)`
`--instui-component-base-button-tertiary-hover-border-color`	`<color>`	LightDark`light-dark(#1D354F33, #EEF4FD)`
`--instui-component-base-button-tertiary-hover-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-icon-action-ai-disabled-color`	`<color>`	LightDark`light-dark(#9EA6AD, #6A7883)`
`--instui-component-shared-tokens-spacing-gap-buttons`	`<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`

Σχετιζόμενα

close-button — Το κουμπί απόρριψης μόνο με εικονίδιο.

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

Συστατικά

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

Βοηθητικά

Κανόνες

Plugins

layout

CSS: button

Προσβασιμότητα

Χρήση

Παράδειγμα επίδειξης

Παραδείγματα

Δομή

Τροποποιητές

Ψευδοστοιχεία

Καταστάσεις

Καταναλωμένα tokens

Σχετιζόμενα

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: button ​

Προσβασιμότητα ​

Χρήση ​

Παράδειγμα επίδειξης ​

Παραδείγματα ​

Δομή ​

Τροποποιητές ​

Ψευδοστοιχεία ​

Καταστάσεις ​

Καταναλωμένα tokens ​

Σχετιζόμενα ​

CSS: button

Προσβασιμότητα

Χρήση

Παράδειγμα επίδειξης

Παραδείγματα

Δομή

Τροποποιητές

Ψευδοστοιχεία

Καταστάσεις

Καταναλωμένα tokens

Σχετιζόμενα