MenuCaderno UI
npmGitHub
Theme

<cad-button>

Button

Trigger an action, submit a form, or navigate to a page. Add icons through slots.

Actions

Save reviewSave draftBrowse componentsRead the contract

API reference: <cad-button>

disableddisabledbooleanfalseformformstring''hrefhrefstring''labellabelstring''relrelstring''sizesizeCadButtonSize'md'targettargetstring''tonetoneCadButtonTone'blue'typetypeCadButtonType'button'variantvariantCadButtonVariant'primary'disabledbooleandisabledyesformstringformnohrefstringhrefnolabelstringlabelnorelstringrelnosizeCadButtonSizesizeyestargetstringtargetnotoneCadButtonTonetoneyestypeCadButtonTypetypeyesvariantCadButtonVariantvariantyes(default)Action label.endOptional trailing visual or metadata.startOptional leading visual or metadata.baseNative button or anchor.endTrailing composition slot.labelAction label.startLeading composition slot.--cad-button-bgPer-instance action color.--cad-button-inkPer-instance foreground color.

Usage and accessibility

Use visible text, or label for icon-only buttons. Set href for navigation and type="submit" or type="reset" for form actions. Disabled buttons and links cannot be activated.

MIT licensed. Built with Caderno UI.Report an issue
Back to top