CSS: close-button

.instui-close-button — Läpinäkyvä ikoni-painike, joka piirtää oman ×-symbolinsa; saatavilla kolmessa koossa sekä värillisellä pinnalla oleva variaatio.

Renderöityy aina pelkkänä ikoni-ohjaimena ilman näkyvää etikettiä, joten aria-label on pakollinen, ei valinnainen; vertaa button-komponentin -without-background ghost-varianttiin, joka säilyttää tekstietiketin.

Source: close-button.css

TIP

JS-parannus — Tämän komponentin CSS renderöi ja toimii itsenäisesti; yhdistä se @pantoken/interactions:n kanssa lisätäksesi interaktiivisen käytöksen. Katso muokkaajataulukko alla.

Saavutettavuus

Anna ikoni-painikkeelle aria-label (esim. "Close") ja merkitse pois käytöstä oleva painike aria-disabled:lla (tai natiivilla disabled:lla).

Käyttö

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

Esimerkit

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

Muokkaajat

Muokkaaja	Kuvaus
.-color-inverse	Vanhentunut — use .-on-color.
.-on-color	Sulkemispainikkeelle, joka on sijoitettu värilliselle (ei-neutraalille) pinnalle.
.-size-large	Suuri. -size-lg:n pitkämuotoinen alias.
.-size-lg	Suuri.
.-size-md	(oletus) keskikokoinen.
.-size-medium	(oletus) keskikokoinen. Pitkämuotoinen alias -size-md:lle.
.-size-sm	Pieni.
.-size-small	Pieni. -size-sm:n pitkämuotoinen alias.

Pseudo-elementit

Pseudo-elementti	Kuvaus
::before	×-symboli, maskattu currentColor:ssa.

Tilat

Tila	Kuvaus
[aria-disabled="true"]	—
:disabled	—

Käytetyt tokenit

Token	Tyyppi	Arvo
--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-ghost-active-background	<color>	LightDarklight-dark(#1D354F33, rgba(255,255,255,0.1))
--instui-component-base-button-primary-ghost-hover-background	<color>	LightDarklight-dark(#1D354F1A, rgba(255,255,255,0.1))
--instui-component-base-button-primary-inverse-ghost-active-background	<color>	rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-hover-background	<color>	rgba(255,255,255,0.1)
--instui-component-base-button-small-height	<length>	2rem
--instui-component-icon-base-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-icon-disabled-base-color	<color>	LightDarklight-dark(#8D959F, #576773)
--instui-component-icon-disabled-on-color	<color>	LightDarklight-dark(#C7CACD, #9EA6AD)
--instui-component-icon-on-color	<color>	#ffffff
--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

Liittyvät

• button — Yleiskäyttöinen toimintonappi.