Merge pull request #560 from ecosyste-ms/add-buttons

Add buttons to the styleguide
ecosyste-ms · Mar 4, 2025 · 1df7d1d · 1df7d1d
2 parents d232f20 + 47672fe
commit 1df7d1d
Showing 1 changed file with 47 additions and 0 deletions.
diff --git a/app/views/pages/styleguide.html.erb b/app/views/pages/styleguide.html.erb
@@ -149,6 +149,53 @@
 			</div>
 		</article>
 
+		<article>
+			<h3>Buttons</h3>
+			<p>ecosyste.ms, in most cases, uses Bootstrap&apos;s <code>.btn</code> class, with the <code>.rounded-pill</code> modifier</p>
+			<h4 class="mb-3">Most used</h4>
+			<div class="row row-cols-1 row-cols-sm-3 row-cols-md-5 g-4">
+				<div class="col">
+					<button type="submit" class="btn btn-primary rounded-pill">Submit</button></br>
+					<code>btn-primary rounded-pill</code>
+				</div>
+				<div class="col">
+					<button type="submit" class="btn btn-success rounded-pill">Submit</button></br>
+					<code>btn-success rounded-pill</code>
+				</div>
+				<div class="col">
+					<button type="submit" class="btn btn-danger rounded-pill">Submit</button></br>
+					<code>btn-primary rounded-pill</code>
+				</div>
+			</div>
+			<h4 class="mt-5 mb-3">Least used</h4>
+			<div class="row row-cols-1 row-cols-sm-3 row-cols-md-5 g-4">
+				<div class="col">
+					<button type="submit" class="btn btn-secondary rounded-pill">Submit</button></br>
+					<code>btn-secondary rounded-pill</code>
+				</div>
+				<div class="col">
+					<button type="submit" class="btn btn-warning rounded-pill">Submit</button></br>
+					<code>btn-warning rounded-pill</code>
+				</div>
+			</div>
+			<h4 class="mt-5 mb-3">Never used</h4>
+			<div class="row row-cols-1 row-cols-sm-3 row-cols-md-5 g-4">
+				<div class="col">
+					<button type="submit" class="btn btn-light rounded-pill">Submit</button></br>
+					<code>btn-light rounded-pill</code>
+				</div>
+				<div class="col">
+					<button type="submit" class="btn btn-dark rounded-pill">Submit</button></br>
+					<code>btn-dark rounded-pill</code>
+				</div>
+				<div class="col">
+					<button type="submit" class="btn btn-info rounded-pill">Submit</button></br>
+					<code>btn-info rounded-pill</code>
+				</div>
+			</div>
+		</article>
+
+
 	<h2>ecosyste.ms components</h2>
 	<article class="my-3">
 		<h3>Page content</h3>