@nitro-ui/component-button
Version:
Button component for Nitro UI.
226 lines (216 loc) • 13.2 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Button - Nitro UI</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../dist/css/button.min.css">
</head>
<body class="bg-light">
<header class="bg-white border-bottom">
<div class="pt-5 px-5">
<style>
.logo-nitro{color:#242e39;font-family:Arial;font-size:20px;line-height:1.2;margin-bottom:100px;position:relative;text-transform:uppercase}.logo-nitro::before{border:2px solid #8105FE;content:'';display:block;height:2em;margin:-1em;position:absolute;top:50%;width:2em;-ms-transform:skewX(25deg);-webkit-transform:skewX(25deg);transform:skewX(25deg)}.logo-nitro>b{display:inline-block;background-color:#fff;position:relative;vertical-align:top}.logo-nitro>b b{font-weight:700;display:block;background:linear-gradient(to bottom,#06080a 0,#687d94 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
</style>
<div class="logo-nitro"><b><b>NITRO UI</b></b></div>
</div>
<div class="container py-5">
<h1 class="font-weight-bold mb-3">Button</h1>
<div class="text-muted">
<p>
Buttons communicate an action to happen on user interaction.
</p>
</div>
</div>
</header>
<article>
<div class="container py-5">
<!-- Styles -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">Styles</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Action</div>
<button class="c-btn c-btn--action">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Primary</div>
<button class="c-btn c-btn--primary">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Primary Outline</div>
<button class="c-btn c-btn--primary-outline">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Secondary</div>
<button class="c-btn c-btn--secondary">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Secondary Outline</div>
<button class="c-btn c-btn--secondary-outline">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Positive</div>
<button class="c-btn c-btn--positive">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Negative</div>
<button class="c-btn c-btn--negative">Button</button>
</div>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
<!-- Sizes -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">Sizes</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-3">
<div class="small text-muted mb-2">Extra Small</div>
<button class="c-btn c-btn--xs c-btn--primary">Button</button>
</div>
<div class="col-md-3">
<div class="small text-muted mb-2">Small</div>
<button class="c-btn c-btn--sm c-btn--primary">Button</button>
</div>
<div class="col-md-3">
<div class="small text-muted mb-2">Default</div>
<button class="c-btn c-btn--primary">Button</button>
</div>
<div class="col-md-3">
<div class="small text-muted mb-2">Large</div>
<button class="c-btn c-btn--lg c-btn--primary">Button</button>
</div>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
<!-- States : Active -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">States : Active</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Action</div>
<button class="c-btn is--active c-btn--action">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Primary</div>
<button class="c-btn is--active c-btn--primary">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Primary Outline</div>
<button class="c-btn is--active c-btn--primary-outline">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Secondary</div>
<button class="c-btn is--active c-btn--secondary">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Secondary Outline</div>
<button class="c-btn is--active c-btn--secondary-outline">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Positive</div>
<button class="c-btn is--active c-btn--positive">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Negative</div>
<button class="c-btn is--active c-btn--negative">Button</button>
</div>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
<!-- States : Disabled -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">States : Disabled</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Action</div>
<button class="c-btn is--disabled c-btn--action">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Primary</div>
<button class="c-btn is--disabled c-btn--primary">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Primary Outline</div>
<button class="c-btn is--disabled c-btn--primary-outline">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Secondary</div>
<button class="c-btn is--disabled c-btn--secondary">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Secondary Outline</div>
<button class="c-btn is--disabled c-btn--secondary-outline">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Positive</div>
<button class="c-btn is--disabled c-btn--positive">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Negative</div>
<button class="c-btn is--disabled c-btn--negative">Button</button>
</div>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
<!-- States : Loading -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">States : Loading</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Action</div>
<button class="c-btn is--loading c-btn--action">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Primary</div>
<button class="c-btn is--loading c-btn--primary">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Primary Outline</div>
<button class="c-btn is--loading c-btn--primary-outline">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Secondary</div>
<button class="c-btn is--loading c-btn--secondary">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Secondary Outline</div>
<button class="c-btn is--loading c-btn--secondary-outline">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Positive</div>
<button class="c-btn is--loading c-btn--positive">Button</button>
</div>
<div class="col-md-3 mb-4">
<div class="small text-muted mb-2">Negative</div>
<button class="c-btn is--loading c-btn--negative">Button</button>
</div>
</div>
</div>
</div>
</div>
</article>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>