snowcoders / react-unstyled-button

React component that renders a html button where all the browser styles have been removed

Deprecation

The majority of what this package did is remove the styling of the default html button. However now that IE 11 is deprecated, the css property all: unset works across enough browsers that it doesn't make sense to maintain this project.

input[type=button],
input[type=submit],
button {
  all: unset;
}

Use it

npm install --save @snowcoders/react-unstyled-button

import { UnstyledButton } from "@snowcoders/react-unstyled-button";
import "@snowcoders/react-unstyled-button/styles.css";

render() {
    <UnstyledButton
        onClick={this.onClick}
    >
        Button text
    </UnstyledButton>
}

Adding custom styling

Custom styling can be applied via specificity

// green-button.css
.sci-react-unstyled-button.green-button {
  // Box-Sizing
  padding: 14px 40px;
  border-radius: 100px;
  border-width: 0px;
  border-style: solid;

  // Colors
  border-color: #16da00;
  background-color: green;
  color: white;

  // Sizes
  font-size: 16px;
  font-family: "Open Sans", X-LocaleSpecific, sans-serif;

  &:hover {
    background-color: darkgreen;
  }
}

// green-button.js
import { UnstyledButton } from "@snowcoders/react-unstyled-button";
import "@snowcoders/react-unstyled-button/styles.css";
import "./green-button.css";

render() {
    <UnstyledButton
        className="green-button"
        onClick={this.onClick}
    >
        Button text
    </UnstyledButton>
}

Parent Library

This component is part of a larger components library, react-ui-base. The goal is to keep all the core logic and base css styles in a single location, that way building out new UI component libraries cheaper and faster (and less buggy).

We highly recommend visiting the react-ui-base repository to understand how to customize the css along with see examples.

You can also view all the components on our demo site https://snowcoders.github.io/react-ui-base/

This component

This component takes the normal HTML Button element and removes all browser styling from it.

react-unstyled-button's Issues

Deprecate this for a css only solution

This package ties together react + css which is not ideal.

Instead, a package that contains several css files to be able to remove styling makes more sense and then can be used in Vue, Angular and React packages.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@snowcoders)

Passing disabled=true doesn't add the disabled attribute on the button

<div class="sci-react-checkbox uber-tofu-checkbox disabled tofu-checkbox">
   <label class="content">
      <button class="sci-react-unstyled-button visual">

Should render

<div class="sci-react-checkbox uber-tofu-checkbox disabled tofu-checkbox">
   <label class="content">
      <button class="sci-react-unstyled-button visual" disabled>