88 </ p >
99
1010 < h2 class ="c-heading c-heading--medium "> Basic Button</ h2 >
11- < p class ="c-paragraph "> To make a button a Blaze button add the < code class ="c-code "> < Button > Button< /Button >
11+ < p class ="c-paragraph "> To make a button a Blaze button add the < code class ="c-code "> < Button> Button< /Button>
1212</ code > </ p >
1313 < div class ="o-grid o-grid--small-full ">
1414 < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small ">
@@ -23,8 +23,8 @@ <h2 class="c-heading c-heading--medium">Basic Button</h2>
2323
2424 < h2 id ="colours " class ="c-heading c-heading--medium "> Button Colours</ h2 >
2525 < p class ="c-paragraph ">
26- There are four button colour modifiers < code class ="c-code "> .c-button-- primary</ code > , < code class ="c-code "> .c-button-- secondary</ code > ,
27- < code class ="c-code "> .c-button-- success</ code > and < code class ="c-code "> .c-button-- error</ code > .
26+ There are four button colour modifiers < code class ="c-code "> primary</ code > , < code class ="c-code "> secondary</ code > ,
27+ < code class ="c-code "> success</ code > and < code class ="c-code "> error</ code > .
2828 </ p >
2929 < div class ="o-grid o-grid--small-full ">
3030 < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small ">
@@ -43,7 +43,7 @@ <h2 id="colours" class="c-heading c-heading--medium">Button Colours</h2>
4343
4444 < h2 id ="groups " class ="c-heading c-heading--medium "> Button Groups</ h2 >
4545 < p class ="c-paragraph ">
46- To group related buttons together you can use the < code class ="c-code "> .c-button-group </ code > wrapping element. This will bunch the buttons
46+ To group related buttons together you can use the < code class ="c-code "> <ButtonGroup > <ButtonGroup > </ code > wrapping element. This will bunch the buttons
4747 together and remove the spacing between them.
4848 </ p >
4949 < div class ="o-grid o-grid--small-full ">
@@ -58,9 +58,8 @@ <h2 id="groups" class="c-heading c-heading--medium">Button Groups</h2>
5858 <Button secondary> Button</Button>
5959</ButtonGroup> </ code > </ pre > </ div >
6060 </ div >
61-
6261 < p class ="c-paragraph ">
63- Adding the < code class ="c-code "> .c-button-group-- rounded</ code > modifier will make the first and last buttons rounded.
62+ Use the < code class ="c-code "> <ButtonGroup rounded> </ code > to make the first and last buttons rounded.
6463 </ p >
6564 < div class ="o-grid o-grid--small-full ">
6665 < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small ">
@@ -69,12 +68,12 @@ <h2 id="groups" class="c-heading c-heading--medium">Button Groups</h2>
6968 < button type ="button " class ="c-button c-button--secondary "> Button</ button >
7069 </ span >
7170 </ div >
72- < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <span class="c-button-group c-button-group-- rounded" >
73- <button class="c-button c-button-- primary" > Button</button >
74- <button class="c-button c-button-- secondary" > Button</button >
75- </span > </ code > </ pre > </ div >
71+ < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <ButtonGroup rounded>
72+ <Button primary> Button</Button >
73+ <Button secondary> Button</Button >
74+ </ButtonGroup > </ code > </ pre > </ div >
7675 </ div >
77-
76+
7877 < h2 id ="sizes " class ="c-heading c-heading--medium "> Button Sizes</ h2 >
7978 < div class ="o-grid o-grid--small-full ">
8079 < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small ">
@@ -84,11 +83,13 @@ <h2 id="sizes" class="c-heading c-heading--medium">Button Sizes</h2>
8483 < button type ="button " class ="c-button c-button--large "> Button</ button >
8584 < button type ="button " class ="c-button c-button--super "> Button</ button >
8685 </ div >
87- < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <button class="c-button c-button--xsmall"> Button</button>
88- <button class="c-button c-button--small"> Button</button>
89- <button class="c-button c-button--medium"> Button</button>
90- <button class="c-button c-button--large"> Button</button>
91- <button class="c-button c-button--super"> Button</button> </ code > </ pre > </ div >
86+ < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <Button> Button</Button>
87+ <Button size="xsmall"> Button</Button>
88+ <Button size="small"> Button</Button>
89+ <Button size="medium"> Button</Button>
90+ <Button size="large"> Button</Button>
91+ <Button size="super"> Button</Button>
92+ </ code > </ pre > </ div >
9293 </ div >
9394
9495 < h2 id ="full-width " class ="c-heading c-heading--medium "> Full Width Buttons</ h2 >
@@ -100,11 +101,12 @@ <h2 id="full-width" class="c-heading c-heading--medium">Full Width Buttons</h2>
100101 < button type ="button " class ="c-button c-button--block c-button--large "> Button</ button >
101102 < button type ="button " class ="c-button c-button--block c-button--super "> Button</ button >
102103 </ div >
103- < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <button class="c-button c-button--block c-button--xsmall"> Button</button>
104- <button class="c-button c-button--block c-button--small"> Button</button>
105- <button class="c-button c-button--block c-button--medium"> Button</button>
106- <button class="c-button c-button--block c-button--large"> Button</button>
107- <button class="c-button c-button--block c-button--super"> Button</button> </ code > </ pre > </ div >
104+ < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <Button block> Button</Button>
105+ <Button block size="xsmall"> Button</Button>
106+ <Button block size="small"> Button</Button>
107+ <Button block size="medium"> Button</Button>
108+ <Button block size="large"> Button</Button>
109+ <Button block size="super"> Button</Button> </ code > </ pre > </ div >
108110 </ div >
109111
110112 < h2 id ="ghost " class ="c-heading c-heading--medium "> Ghost Buttons</ h2 >
@@ -116,11 +118,12 @@ <h2 id="ghost" class="c-heading c-heading--medium">Ghost Buttons</h2>
116118 < button type ="button " class ="c-button c-button--ghost c-button--large "> Button</ button >
117119 < button type ="button " class ="c-button c-button--ghost c-button--super "> Button</ button >
118120 </ div >
119- < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <button class="c-button c-button--ghost c-button--xsmall"> Button</button>
120- <button class="c-button c-button--ghost c-button--small"> Button</button>
121- <button class="c-button c-button--ghost c-button--medium"> Button</button>
122- <button class="c-button c-button--ghost c-button--large"> Button</button>
123- <button class="c-button c-button--ghost c-button--super"> Button</button> </ code > </ pre > </ div >
121+ < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <Button ghost> Button</Button>
122+ <Button ghost size="xsmall"> Button</Button>
123+ <Button ghost size="small"> Button</Button>
124+ <Button ghost size="medium"> Button</Button>
125+ <Button ghost size="large"> Button</Button>
126+ <Button ghost size="super"> Button</Button> </ code > </ pre > </ div >
124127 </ div >
125128
126129 < h2 id ="ghost-colours " class ="c-heading c-heading--medium "> Ghost Colours</ h2 >
@@ -132,11 +135,11 @@ <h2 id="ghost-colours" class="c-heading c-heading--medium">Ghost Colours</h2>
132135 < button type ="button " class ="c-button c-button--ghost-success c-button--large "> Button</ button >
133136 < button type ="button " class ="c-button c-button--ghost-error c-button--super "> Button</ button >
134137 </ div >
135- < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <button class="c-button c-button-- ghost c-button--xsmall" > Button</button >
136- <button class="c-button c-button-- ghost- primary c-button--small" > Button</button >
137- <button class="c-button c-button-- ghost- secondary c-button--medium" > Button</button >
138- <button class="c-button c-button-- ghost- success c-button--large" > Button</button >
139- <button class="c-button c-button-- ghost- error c-button--super" > Button</button > </ code > </ pre > </ div >
138+ < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <Button ghost> Button</Button >
139+ <Button ghost primary size="xsmall" > Button</Button >
140+ <Button ghost secondary size="small" > Button</Button >
141+ <Button ghost success size="medium" > Button</Button >
142+ <Button ghost error size="large" > Button</Button > </ code > </ pre > </ div >
140143 </ div >
141144
142145 < h2 id ="rounded " class ="c-heading c-heading--medium "> Rounded Buttons</ h2 >
@@ -148,10 +151,10 @@ <h2 id="rounded" class="c-heading c-heading--medium">Rounded Buttons</h2>
148151 < button type ="button " class ="c-button c-button--rounded c-button--ghost-success c-button--large "> Button</ button >
149152 < button type ="button " class ="c-button c-button--rounded c-button--ghost-error c-button--super "> Button</ button >
150153 </ div >
151- < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <button class="c-button c-button-- rounded c-button-- ghost c-button--xsmall" > Button</button >
152- <button class="c-button c-button-- rounded c-button-- ghost- primary c-button--small" > Button</button >
153- <button class="c-button c-button-- rounded c-button-- ghost- secondary c-button--medium" > Button</button >
154- <button class="c-button c-button-- rounded c-button-- ghost- success c-button--large" > Button</button >
155- <button class="c-button c-button-- rounded c-button-- ghost- error c-button--super" > Button</button > </ code > </ pre > </ div >
154+ < div class ="o-grid__cell o-grid__cell--width-50 u-letter-box--small "> < pre class ="c-pre html "> < code class ="c-code c-code--multiline "> <Button rounded ghost> Button</Button >
155+ <Button rounded ghost primary size="xsmall" > Button</Button >
156+ <Button rounded ghost secondary size="small" > Button</Button >
157+ <Button rounded ghost success size="medium" > Button</Button >
158+ <Button rounded ghost error size="large" > Button</Button > </ code > </ pre > </ div >
156159 </ div >
157160</ div >
0 commit comments