CSS: button-set

.instui-button-set — Rārangi pātene piri (whakaū, kore āputa), me ngā kokonga waho e rua anake kua porohitia.

Ko ōna ake whakarerekētanga mekameka (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) ka tautuhi i te uara taunoa mō ia tamaiti .instui-button kāore nei ōna ake whakarerekētanga i taua kāwai tonu — ka nui ake te mana o te karaehe whakarerekētanga ake o tētahi pātene i te uara taunoa o te rōpū. Ko -icon-* mō ia pātene anake; kāore rawa e pānuitia mai i te rōpū. Kāore e tautokona ngā ingoakē pātene kua whakakorehia (-ghost, -color-primary-inverse) hei whakarerekētanga taumata-rōpū — whakamahia kē ngā ingoa whakakapi whai mana (-color-tertiary, -on-color)). Ka kitea he tui 1px kotahi i te tae taitapa ake o ngā pātene i ia hononga (mō ngā whakakī totoka, e ōrite ana te tae o te taitapa ki te whakakī, ka pania taua tui ki te tae o te tapanga).). Ko -without-seam mō te rōpū anake: ka huna i taua tui kia rite ai te āhua o ngā pātene ki tētahi mana kotahi, haere tonu. Whakamaua te -width-half ki tētahi pātene tamaiti takitahi he ata anake tōna, hei pātene whakakāwehe-mahi, he haurua te whānui tapawhā paerewa, ā, ko te teitei katoa o te pātene.

Ngā Whakamahi

@import "@pantoken/plugin-custom-components/custom-components.css";

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Whakakore</button>
  <button class="instui-button -color-primary -icon-checkmark">Whakau</button>
</div>

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">Rā</button>
  <button class="instui-button"> Wiki 1</button>
  <button class="instui-button">Marama</button>
</div>

Split action

Put -width-half on only the icon-only trigger to give it half the standard square button's width, keeping the full height. The main action can have a text label or be an icon-only square button. Group sizes and per-button size overrides apply; the width isn't a fraction of the main action. Give the icon-only button an accessible name. This example shows layout only: wire the trigger to a real menu and manage its expanded state and focus in your application.

<div class="instui-button-set -color-primary" role="group" aria-label="Save actions">
  <button class="instui-button" type="button">Tiaki ngā panoni</button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More save actions"></button>
</div>
<div class="instui-button-set -size-md" role="group" aria-label="Add actions">
  <button class="instui-button -shape-square -icon-plus" type="button" aria-label="Add"></button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More add actions"></button>
</div>

Hanganga

.instui-button-set
  button (component, 1..n)

flowchart TD n0[".instui-button-set"]:::cssdoc-root n1(["button"]):::cssdoc-component n0 -->|1..n| n1 click n1 "/api/css/button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-color-ai	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te maimoatanga grēdhi AI.
.-color-ai-secondary	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te maimoatanga AI me te kīhai i te taumata taumaha.
.-color-danger	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te tae whakangaro.
.-color-primary	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te tae matua.
.-color-secondary	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te tae tuarua.
.-color-success	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te tae angitu.
.-color-tertiary	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te tae tuatoru (āhua kuputuhi)).
.-condensed	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te whakakii pātata ake.
.-display-block	Whakariteia ia tamaiti kāore i whakatikahia kia whānui-katoa.
.-on-color	Tautuhi taunoa ia tamaiti kāore i whakatikahia mō te whakaurunga ki runga i te mata tae.
.-shape-circle	Tautuhi taunoa ia tamaiti kāore i whakatikahia hei pātene tohu porowhita.
.-shape-square	Tautuhi taunoa ia tamaiti kāore i whakatikahia hei pātene tohu tapawhā.
.-size-lg	Tautuhi taunoa ia tamaiti kāore i whakatikahia kia rahi.
.-size-md	(taunoa) rahi ātaahua.
.-size-sm	Tautuhi taunoa ia tamaiti kāore i whakatikahia kia iti.
.-toggle	Tautuhi taunoa ia tamaiti kāore i whakatikahia ki te maimoatanga kume āhuatanga pātene (stete pēhia).
.-without-background	Tautuhi taunoa ia tamaiti kāore i whakatikahia kia kore he kapi.
.-without-border	Tautuhi taunoa ia tamaiti kāore i whakatikahia kia kore he taha.
.-without-seam	Huna te raranga 1px i waenga i ngā pātene.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
::after	—
::before	—

Ngā āhuatanga

Tūnga	Whakamārama
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

Wātea mō te katoa

Whakamahia he rōpū kua tapaina mō ngā mahi e whai pānga ana; ina tohu ngā pātene i tētahi kōwhiringa takahuri, whakaaturia te āhua o ia pātene mā te aria-pressed. Hoatu he ingoa āheitanga ki ngā pātene he ata anake tō rātou. He whāiti ngā pātene whakakāwehe, nō reira he whāiti hoki ngā wāhi pāwhiri (16px, 20px, 24px rānei mō ngā rahinga paerewa); whakaritea kia nui te tawhiti i waenganui i ngā wāhi pāwhiri, whakamahia rānei he pātene tapawhā whānui katoa mō ngā atanga pā-mata.

Ngā Ture (axe-core)	Whakahou waitohu (mārama)	Whakahou waitohu (pōuri)	Canvas	Canvas He Rerekētanga Teitei
color-contrastWCAG 2.2 1.4.3	Me arotake	Me arotake	Me arotake	Me arotake
	Me tutuki ngā huānga i ngā paearu mōkito o te ōwehenga rerekētanga tae .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	Me 24px te rahi o ngā wāhi pā katoa, me waiho rānei he mokowā rawaka .-color-primary[aria-label="Save actions"][role="group"]:nth-child(19) > .-wi... .-color-primary[aria-label="Save actions"][role="group"]:nth-child(22) > .-wi... button[aria-label="More add actions"]

Ngā Here	Whakahou waitohu (mārama)	Whakahou waitohu (pōuri)	Canvas	Canvas He Rerekētanga Teitei
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7	Pass	Pass	Pass	Pass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6	Fail	Fail	Fail	Fail
	Whakahou waitohu (light): Ki te prefers-contrast: more, ka taka ngā wāhanga kuputuhi e ono ki raro iho i te taumata rerekētanga iti rawa. Ko te mea kino rawa ko "Send" i te 1.64:1 (me 4.5:1). Whakahou waitohu (dark): Ki te prefers-contrast: more, ka taka ngā wāhanga kuputuhi e ono ki raro iho i te taumata rerekētanga iti rawa. Ko te mea kino rawa ko "Send" i te 1.78:1 (me 4.5:1). Canvas, Canvas High Contrast: Ki te prefers-contrast: more, ka taka ngā wāhanga kuputuhi e rua ki raro iho i te taumata rerekētanga iti rawa. Ko te mea kino rawa ko "Rewrite" i te 1.88:1 (me 4.5:1).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	Kāore e hāngai ana	Pass	Pass	Kāore e hāngai ana
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11	Pass	Pass	Kāore e hāngai ana	Kāore e hāngai ana
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	I te matapihi 320px, ka panuku whakapae te whārangi (592px te whānui i roto i te matapihi 320px)), ā, ka toro tētahi huānga ki tua atu i te tapa matau: button.instui-button ka mutu ki te 592px. Ka whakaaetia e WCAG 1.4.10 Reflow (taumata AA) ngā ihirangi ahu-rua pēnei i ngā ripanga raraunga me ngā mahere, nō reira mā te tangata e whakatau mēnā e hāngai ana tēnei.
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

Pānui mata (whaihanga)	Whakahou waitohu (mārama)	Whakahou waitohu (pōuri)	Canvas	Canvas He Rerekētanga Teitei
Announcements	Pass	Pass	Pass	Pass

Kāore ēnei hua aunoa e whakaū ana e tutuki ana te whārangi i ngā paearu WCAG; me arotake ā-ringa tonu.

Ngā tohu i whakamahia

Token	Momo	Uara
--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-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-background-interactive-action-secondary-active	<color>	light-dark(color-mix(in srgb, #44709F 15%, transparent), #2E5177)
--instui-color-background-interactive-action-success-base	<color>	#037D37
--instui-color-background-interactive-action-success-hover	<color>	#03893D
--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-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-stroke-interactive-action-secondary-active	<color>	light-dark(color-mix(in srgb, #44709F 0%, transparent), #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>	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-secondary-base	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-color-text-interactive-action-status-base	<color>	#ffffff
--instui-component-base-button-ai-disabled-background-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-border-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-text-color	<color>	LightDarklight-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>	LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-primary-disabled-background-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-ghost-active-background	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-background	<color>	transparent
--instui-component-base-button-primary-ghost-border-color	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background	<color>	#E2EAF7
--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>	#EEF4FD
--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>	hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l * 0.85))
--instui-component-base-button-secondary-active-border-color	<color>	color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-active-text-color	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background	<color>	LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-base-button-secondary-border-color	<color>	color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-color	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-disabled-background-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-border-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-text-color	<color>	LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-secondary-hover-background	<color>	hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l + (100 - l) * 0.4))
--instui-component-base-button-secondary-hover-border-color	<color>	color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-hover-text-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-component-base-button-tertiary-active-border-color	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color	<color>	LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-icon-action-ai-disabled-color	<color>	LightDarklight-dark(#9EA6AD, #6A7883)
--instui-spacing-space-xs	<length>	0.25rem

Ngā wāhanga-iti

• button

Hono

• close-button — Te pātene whakakore tohu-anake.