React Development with the Shards React Library — Button

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Button

We can add a button with React Shard’s Button component.

For instance, we can write:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button theme="secondary">Secondary</Button>
    </div>
  );
}

We set the theme to set the background color.

We can also set it to success , danger , info , light , and dark .

If we leave it out, we see a blue background color.

We can add an outlined style with the outline prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button outline theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

And we can make it pill-shaped with the pill prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button pill theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

We can add all the props together.

Also, we can make it square with the squared prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button squared theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

And we can change the size with the size prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button size="lg" theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

The active state can be added with the active prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button active>Secondary</Button>
    </div>
  );
}

The disabled prop lets us make the button look disabled:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button disabled>Secondary</Button>
    </div>
  );
}

The block prop makes the button display as a block-level element:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button block>Secondary</Button>
    </div>
  );
}

Conclusion

We can add buttons with various styles into our React app with Shards React.