@wasd/design-system-button
v0.5.0
Published
Token-driven action component with CSS, Vue, React, and Web Component entrypoints. Shared ripple behavior comes from `@wasd/design-system-ripple`.
Readme
@wasd/design-system-button
Token-driven action component with CSS, Vue, React, and Web Component entrypoints.
Shared ripple behavior comes from @wasd/design-system-ripple.
Button styling consumes component token custom properties generated by a theme
package. Apps should import @wasd/design-system/css for the aggregate CSS.
Standalone button CSS users should import a named theme CSS package,
@wasd/design-system-ripple/css, and then @wasd/design-system-button/css.
Variants:
primaryfor the main action in a decision area.secondaryfor quieter adjacent actions.tertiaryfor low-emphasis inline or toolbar actions.
Set href to render a native anchor for navigation. Omit href to render a
native button for form and command actions.
Theme Type
Component theme values use WasdButtonTheme from
@wasd/design-system-button/tokens. The token entry also exports buttonTheme,
buttonState, buttonVariant, buttonVariantSelector, buttonVars, and the
button theme contract. Import this package from a theme only when that theme
styles button tokens.
