One UIX

Buttons

One UIX buttons with full examples.

Default Buttons

JSX
<Button label="Submit" />
<Button label="Cancel" />
<Button label="Click Me" />
<Button label="Learn More" />
<Button label="Explore" />
<Button label="Login" />
<Button label="Register" />
<Button label="Buy Now" />
<Button label="Continue" />
<Button label="Get Started" />

Colored Buttons

JSX
<Button color="black" label="Black" />
<Button color="red" label="Red" />
...
<Button color="gray" label="Gray" />

Button Sizes

JSX
<Button color="red" size="xs" label="Extra Small" />
<Button color="red" size="sm" label="Small" />
<Button color="red" size="md" label="Medium" />
<Button color="red" size="lg" label="Large" />
<Button color="red" size="xl" label="Extra Large" />

Button Variants

Soft

JSX
<Button color="black" variant="soft" label="Black" />
<Button color="red" variant="soft" label="Red" />
...

Ghost

JSX
<Button color="black" variant="ghost" label="Black" />
<Button color="red" variant="ghost" label="Red" />
...

Outline

JSX
<Button color="black" variant="outline" label="Black" />
<Button color="red" variant="outline" label="Red" />
...

Buttons with Icons

JSX
<Button label="Favorite" icon={<Heart />} />
<Button label="Buy Now" icon={<ShoppingCart />} />
<Button label="Continue" iconRight={<ArrowRight />} />
<Button label="Rate Us" icon={<Star />} />
<Button label="Send" iconRight={<Send />} />

Loading Buttons

JSX
<Button label="Loading..." loading />
<Button label="Submitting" color="green" loading />
<Button label="Processing" color="blue" size="lg" loading />

Full Width Buttons

JSX
<Button label="Full Width Primary" wide />
<Button label="Full Width Ghost" variant="ghost" wide />

Icon Only Buttons

JSX
  <Button iconOnly={<Heart />} />
  <Button iconOnly={<Search />} />
  <Button iconOnly={<Plus />} />

Icon Only Pill Buttons

JSX
  <Button color="blue" iconOnly={<Heart />} pill />
  <Button color="emerald" iconOnly={<Search />} pill />
  <Button color="purple" iconOnly={<Plus />} pill />