KitlenoKitlenov2.0.0

Actions & display / Button

Button

Button components are used to trigger actions and interactions in a user interface, such as submitting forms, opening dialogs, or navigating between pages.

Primary Button

The default button style. Use it for the main action in a view — form submissions, confirmations, and primary CTAs.

PrimaryButton.jsx
export default function PrimaryButton() {
  return (
    <button className="bg-[#E8E8E8] border-2 border-[#E0E0E0] py-2 px-4 rounded-full hover:bg-[#F1F1F1] cursor-pointer text-[#121212] dark:text-[#f1f1f1] dark:bg-[#2A2A2A]  dark:border-[#4C4C4C] dark:hover:bg-[#1E1E1E]">
      Primary
    </button>
  )
}

Secondary Button

A lower-emphasis button for secondary actions alongside a primary. Avoids competing with the primary CTA.

SecondaryButton.jsx
export default function SecondaryButton() {
  return (
    <button className="bg-[#ffffff] hover:bg-[#f1f1f1]  py-2 px-4 rounded-lg cursor-pointer text-[#121212] dark:text-[#f1f1f1] dark:bg-[#1e1e1e] hover:dark:bg-[#2a2a2a]">
      Secondary
    </button>
  )
}