CSS: close-button

.instui-close-button — Egy átlátszó ikon gomb, amely a saját × glifa rajzol, három méretben és egy inverz variánsban.

Mindig csak ikon vezérlőként jelenik meg, nincsen látható felirat, ezért egy aria-label szükséges, nem opcionális; hasonlítsa össze a button -without-background szellem változatával, amely megtartja a szöveges feliratot.

Forrás: close-button.css

TIP

JS-bővítmény — Ennek a komponensnek a CSS-e önmagában is renderelődik és működik; párosítsa a(z) @pantoken/interactions elemmel az interaktív viselkedés hozzáadásához. Lásd az alábbi módosítótáblázatot.

Akadálymentesség

Adjon az ikongombnak egy aria-label -t (pl. "Bezárás").

Használat

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

Példák

<button class="instui-close-button -size-sm" aria-label="Close"></button>

Módosítók

Módosító	Leírás
.-color-inverse	Sötét hátterűek számára.
.-size-large	Nagy. Hosszú forma alias a -size-lg.
.-size-lg	Nagy.
.-size-sm	Kicsi.
.-size-small	Kicsi. Hosszú forma alias a -size-sm.

Pszeudoelemek

Pszeudoelem	Leírás
::before	A × glifa, maszkolva currentColor -ban.

Felhasznált tokenek

Token	Típus	Érték
--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-text-interactive-action-secondary-base	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-border-radius	<length>	0.75rem
--instui-component-base-button-large-height	<length>	3rem
--instui-component-base-button-medium-height	<length>	2.5rem
--instui-component-base-button-primary-inverse-ghost-color	<color>	#ffffff
--instui-component-base-button-small-height	<length>	2rem
--instui-icon-x	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-spacing-space-xs	<length>	0.25rem

Kapcsolódó

• button — Az általános célú akciógomb.