Class Names

Each component exposes a className prop that can be used to add custom class names to the component. This is useful for adding custom styles or overriding the default styles. The prop is passed to the classnames package to generate the final class name, so you can take advantage of that to make your class names cleaner.

Below are some common examples of using class names. Please reference the above package for more.

Concatenate class names

It will combine a list of classNames into a single string.

import { useState } from "react";
import { Button } from "@atomicjolt/atomic-elements";

function App({ className }) {
  return (
    <Button className={["my-internal-class-name", className]}>
      Hidden Button
    </Button>
  );
}

Conditional class names

The is-hidden class name will only be applied to the class when hidden === true

import { useState } from 'react';
import { Button, CheckBox } from "@atomicjolt/atomic-elements";

function App() {
    const [hidden, setHidden] = useState(false);

    return (
        <>
        <Button className={{ 'is-hidden': hidden }}>Hidden Button</Button>
        <CheckBox isSelected={hidden} onSelectionChange={setHidden}>
        </>
    )
}