Design systém gov.cz4.7.1

gov-button ​

Properties ​

PropertyAttributeDescriptionTypeDefault
colorcolorStyle variation of the button"error" | "neutral" | "primary" | "secondary" | "success" | "warning"undefined
disableddisabledMakes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologiesbooleanfalse
downloaddownloadSame as original parameterbooleanundefined
expandedexpandedExpands the button to fill 100% of the container widthbooleanfalse
expandedMobileexpanded-mobileExpands the button to fill 100% of the container width only on mobilebooleanfalse
focusablefocusableSame as original parameterbooleantrue
hrefhrefSame as original parameterstringundefined
hreflanghreflangSame as original parameterstringundefined
identifieridentifierCustom button identifierstringundefined
loadingloadingIndicates whether an asynchronous process is runningstringundefined
namenameThe name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attributestringundefined
nativeTypenative-typeSame as original parameter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type"button" | "reset" | "submit""button"
referrerpolicyreferrerpolicySame as original parameterstringundefined
relrelSame as original parameterstringundefined
sizesizeButton’s size"l" | "m" | "s" | "xl" | "xs""m"
tabtabSame as original parameternumber0
targettargetSame as original parameter"_blank" | "_new" | "_self"undefined
typetypeButton's type"base" | "link" | "outlined" | "solid"undefined

Events ​

EventDescriptionType
gov-blurEmitted when the button loses focusCustomEvent<ButtonEvent>
gov-clickEmitted when the button clickCustomEvent<ButtonEvent>
gov-focusEmitted when the button has focusCustomEvent<ButtonEvent>

Methods ​

getRef() => Promise<HTMLLinkElement | HTMLButtonElement> ​

Returns a clickable element instance

Returns ​

Type: Promise<HTMLLinkElement | HTMLButtonElement>

setFocus() => Promise<void> ​

Focus button element

Returns ​

Type: Promise<void>

validateAccessibility() => Promise<void> ​

Validate the Accessibility attributes of the component

Returns ​

Type: Promise<void>

Dependencies ​

Used by ​

Depends on ​

Graph ​


Built with StencilJS