This issue documents the implementation of the core base HTML element atom Button that represents a <button> with matching brand styles. It can also wrap the base HTML element atom A to handle internal and external links.
It will provide multiple variations:
primary — uses the primary color nord8 for background/border/text colorization
secondary — uses the secondary color nord9 for background/border/text colorization
simple — uses the Snow Storm and Polar Night palettes for background/border/text colorization
subtle — only colorizes the background on hover using the Snow Storm and Polar Night palettes for background/border/text colorization
Next to variations there will be additional props to toggle more styles:
dashed — uses the dashed property for the CSS border-style attribute
ghost — only uses a border instead of a background color
outlined — uses uses a border in addition to a background color
quiet — keeps the initial text colorization on hover
This issue documents the implementation of the core base HTML element atom
Buttonthat represents a<button>with matching brand styles. It can also wrap the base HTML element atomAto handle internal and external links.It will provide multiple variations:
primary— uses the primary colornord8for background/border/text colorizationsecondary— uses the secondary colornord9for background/border/text colorizationsimple— uses the Snow Storm and Polar Night palettes for background/border/text colorizationsubtle— only colorizes the background on hover using the Snow Storm and Polar Night palettes for background/border/text colorizationNext to variations there will be additional props to toggle more styles:
dashed— uses thedashedproperty for the CSSborder-styleattributeghost— only uses a border instead of a background coloroutlined— uses uses a border in addition to a background colorquiet— keeps the initial text colorization on hoverTasks
Link.