Basic example of a Button component in ReactJs.

100%

Basic example of a Button component in ReactJs.

✓ Published0🌍 Public

Last edited Jul 19, 2021

Created on Dec 30, 2021

This example demonstrates a reusable Button component built with React’s `forwardRef` API and TypeScript interfaces. It shows how the component accepts standard `ButtonHTMLAttributes` while adding a custom `primary` boolean prop to conditionally apply a `btn-primary` CSS class. The implementation spreads the remaining props onto the underlying HTML `<button>` element and forwards the `ref` for imperative access. The code highlights a pattern for extending native HTML elements with additional styling logic, using the `React.ButtonHTMLAttributes` type and `forwardRef` for proper ref handling in React components.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist f65ed8d40fde74355f8585ce0d77845b

This example shows a single interactive button component built with React. The button changes its background color to red when activated, using a boolean class binding that applies the `true` class from a SCSS stylesheet. The component defines a `NavButton` functional component, which imports React and a `style.scss` file, and renders a container with a clickable label. The styling leverages SCSS variables and nested rules to manage the button’s border, radius, and active state, while the container class uses placeholder CSS to define layout. No external data or animation libraries are involved; the behavior is limited to visual state toggling via the class change.

Aamazingandyyy

75% match

Loading thumbnail…

css-article-6.jsx

This example demonstrates how a styled button can be created using plain HTML and CSS within a React component, without any additional styling libraries or complex JavaScript. It shows a simple interactive element—a red button with white text and a subtle shadow—as a standalone snippet. The code relies on standard React JSX syntax and Tailwind CSS utility classes (such as `ma4`, `bg-red`, `white`, `ph4`, `pv2`, `f6`, `shadow`) to define the button’s appearance and spacing. The rendering approach is straightforward: a single JSX element returns the button, highlighting how React handles presentational components with minimal setup.

HHerbCaudill

72% match

Loading thumbnail…

css-article-07.jsx

This example shows a single interactive button rendered with React and styled using Tailwind CSS classes. The button includes padding, a primary background color, white text, a small font size, and a shadow, demonstrating a common UI pattern. The code uses JSX to define the button element and applies utility classes directly, showcasing how React components can integrate Tailwind for rapid styling. No additional logic or event handlers are present, focusing solely on static visual presentation.

HHerbCaudill

69% match

Loading thumbnail…

css-article-8.jsx

This example shows how to apply theme-aware styling to a simple button component in a React application. The code uses the `sx` prop from the Theme UI library to define styles inline, pulling color values like `primary` and spacing tokens like `m: 10` directly from the theme object. The button renders with white text, a large box shadow, and padding derived from the theme’s spacing scale. The rendering approach relies on React’s JSX syntax, with no external data sources or interactive behavior shown beyond the static button element.

HHerbCaudill

68% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static HTML page with two clickable buttons, each styled differently. The first button uses inline CSS with a red text color and blue background, while the second remains unstyled. The code relies on native HTML elements and inline style attributes, with no JavaScript or external libraries involved. It serves as a minimal starting point for testing basic web page structure and button interactivity.

JjanoPig

65% match

Loading thumbnail…

Styled-Components example

Styled-Components example shows how CSS-in-JS embeds styling directly within React component definitions, rendering a title, buttons, and a wrapper using styled.h1, styled.section, and styled.button. It demonstrates prop-based styling via interpolations in template literals, where a primary prop adapts button colors, and component extension through styled(Button) overrides. The code imports React, ReactDOM, and styled-components, then renders the composed UI into the #root div.

Ggjonor

65% match

Loading thumbnail…

Using React component ref

This example demonstrates how a React component can use a ref callback to store a direct reference to a DOM node. The code defines an `Input` class component that assigns the underlying `<input>` element to `this.inputNode` through the `ref` attribute. This pattern enables imperative access to the input’s native methods and properties, such as focusing or reading its value, without relying on the React synthetic event system. The implementation uses React’s class component lifecycle and the standard `ref` callback API.

TTheComfyChair

65% match

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a single button labeled “hello” at a large font size. The page imports Bootstrap 4 CSS for styling and uses a border class to outline the button, while custom inline CSS centers the content. The rendering approach is straightforward static HTML without any JavaScript interactions or data visualization, serving as a bare-bones starter template for web development projects.

Rrichad97

64% match