Skip to content

Commit aea06ed

Browse files
TechQueryTechQuery
committed
[add] Button component
1 parent 1f3d2e7 commit aea06ed

File tree

2 files changed

+329
-1
lines changed

2 files changed

+329
-1
lines changed

‎document/source/components/Button.mdx‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
---
2+
layout: docs
3+
title: Button
4+
description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
5+
group: Components
6+
---
7+
8+
import { Fragment } from 'web-cell';
9+
10+
import { Button } from 'boot-cell/source/Form/Button';
11+
import { InputGroup } from 'boot-cell/source/Form/InputGroup';
12+
import { DropMenu } from 'boot-cell/source/Navigator/DropMenu';
13+
14+
import { Example } from '../../../source/component/Example';
15+
16+
## Examples
17+
18+
Bootstrap includes several predefined button styles, each serving its own semantic purpose,
19+
with a few extras thrown in for more control.
20+
21+
<Example>
22+
<Button>Primary</Button>
23+
<Button kind="secondary">Secondary</Button>
24+
<Button kind="success">Success</Button>
25+
<Button kind="danger">Danger</Button>
26+
<Button kind="warning">Warning</Button>
27+
<Button kind="info">Info</Button>
28+
<Button kind="light">Light</Button>
29+
<Button kind="dark">Dark</Button>
30+
<Button kind="link">Link</Button>
31+
</Example>
32+
33+
```TSX
34+
import { render, createCell, Fragment } from 'web-cell';
35+
import { Button } from 'boot-cell/source/Form/Button';
36+
37+
render(
38+
<Fragment>
39+
<Button>Primary</Button>
40+
<Button kind="secondary">Secondary</Button>
41+
<Button kind="success">Success</Button>
42+
<Button kind="danger">Danger</Button>
43+
<Button kind="warning">Warning</Button>
44+
<Button kind="info">Info</Button>
45+
<Button kind="light">Light</Button>
46+
<Button kind="dark">Dark</Button>
47+
<Button kind="link">Link</Button>
48+
</Fragment>
49+
);
50+
```
51+
52+
> ##### Conveying meaning to assistive technologies
53+
>
54+
> Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies –
55+
> such as screen readers. Ensure that information denoted by the color is either obvious from the content itself
56+
> (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
57+
58+
## Disable text wrapping
59+
60+
If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button.
61+
In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
62+
63+
## Button tags
64+
65+
When using `<Button href="" />` that are used to trigger in-page functionality (like collapsing content),
66+
rather than linking to new pages or sections within the current page.
67+
68+
<Example>
69+
<Button href="https://web-cell.dev/">Link</Button>
70+
<Button type="submit">Button</Button>
71+
<Button>Input</Button>
72+
<Button type="submit">Submit</Button>
73+
<Button type="reset">Reset</Button>
74+
</Example>
75+
76+
```TSX
77+
import { render, createCell, Fragment } from 'web-cell';
78+
import { Button } from 'boot-cell/source/Form/Button';
79+
80+
render(
81+
<Fragment>
82+
<Button href="https://web-cell.dev/">Link</Button>
83+
<Button type="submit">Button</Button>
84+
<Button>Input</Button>
85+
<Button type="submit">Submit</Button>
86+
<Button type="reset">Reset</Button>
87+
</Fragment>
88+
);
89+
```
90+
91+
## Outline buttons
92+
93+
In need of a button, but not the hefty background colors they bring?
94+
Use `outline` property with `kind=""` property to remove all background images and colors on any button.
95+
96+
<Example>
97+
<Button outline>Primary</Button>
98+
<Button outline kind="secondary">
99+
Secondary
100+
</Button>
101+
<Button outline kind="success">
102+
Success
103+
</Button>
104+
<Button outline kind="danger">
105+
Danger
106+
</Button>
107+
<Button outline kind="warning">
108+
Warning
109+
</Button>
110+
<Button outline kind="info">
111+
Info
112+
</Button>
113+
<Button outline kind="light">
114+
Light
115+
</Button>
116+
<Button outline kind="dark">
117+
Dark
118+
</Button>
119+
<Button outline kind="link">
120+
Link
121+
</Button>
122+
</Example>
123+
124+
```TSX
125+
import { render, createCell, Fragment } from 'web-cell';
126+
import { Button } from 'boot-cell/source/Form/Button';
127+
128+
render(
129+
<Fragment>
130+
<Button outline>Primary</Button>
131+
<Button outline kind="secondary">
132+
Secondary
133+
</Button>
134+
<Button outline kind="success">
135+
Success
136+
</Button>
137+
<Button outline kind="danger">
138+
Danger
139+
</Button>
140+
<Button outline kind="warning">
141+
Warning
142+
</Button>
143+
<Button outline kind="info">
144+
Info
145+
</Button>
146+
<Button outline kind="light">
147+
Light
148+
</Button>
149+
<Button outline kind="dark">
150+
Dark
151+
</Button>
152+
<Button outline kind="link">
153+
Link
154+
</Button>
155+
</Fragment>
156+
);
157+
```
158+
159+
## Sizes
160+
161+
Fancy larger or smaller buttons? Add `size="lg"` or `size="sm"` for additional sizes.
162+
163+
<Example>
164+
<Button size="lg">Large button</Button>
165+
<Button kind="secondary" size="lg">
166+
Large button
167+
</Button>
168+
</Example>
169+
170+
```TSX
171+
import { render, createCell, Fragment } from 'web-cell';
172+
import { Button } from 'boot-cell/source/Form/Button';
173+
174+
render(
175+
<Fragment>
176+
<Button size="lg">Large button</Button>
177+
<Button kind="secondary" size="lg">
178+
Large button
179+
</Button>
180+
</Fragment>
181+
);
182+
```
183+
184+
<Example>
185+
<Button size="sm">Small button</Button>
186+
<Button kind="secondary" size="sm">
187+
Small button
188+
</Button>
189+
</Example>
190+
191+
```TSX
192+
import { render, createCell, Fragment } from 'web-cell';
193+
import { Button } from 'boot-cell/source/Form/Button';
194+
195+
render(
196+
<Fragment>
197+
<Button size="sm">Small button</Button>
198+
<Button kind="secondary" size="sm">
199+
Small button
200+
</Button>
201+
</Fragment>
202+
);
203+
```
204+
205+
Create block level buttons — those that span the full width of a parent—by adding `block` property.
206+
207+
<Example>
208+
<Button size="lg" block>
209+
Block level button
210+
</Button>
211+
<Button kind="secondary" size="lg" block>
212+
Block level button
213+
</Button>
214+
</Example>
215+
216+
```TSX
217+
import { render, createCell, Fragment } from 'web-cell';
218+
import { Button } from 'boot-cell/source/Form/Button';
219+
220+
render(
221+
<Fragment>
222+
<Button size="lg" block>
223+
Block level button
224+
</Button>
225+
<Button kind="secondary" size="lg" block>
226+
Block level button
227+
</Button>
228+
</Fragment>
229+
);
230+
```
231+
232+
## Active state
233+
234+
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.
235+
**There’s no need to add a class to `<Button />`s as they use a pseudo-class.**
236+
However, you can still force the same active appearance with `.active` (and include the `aria-pressed="true"` attribute)
237+
should you need to replicate the state programmatically.
238+
239+
<Example>
240+
<Button size="lg" className="active" aria-pressed="true" href="#">
241+
Primary link
242+
</Button>
243+
<Button
244+
kind="secondary"
245+
size="lg"
246+
className="active"
247+
aria-pressed="true"
248+
href="#"
249+
>
250+
Link
251+
</Button>
252+
</Example>
253+
254+
```TSX
255+
import { render, createCell, Fragment } from 'web-cell';
256+
import { Button } from 'boot-cell/source/Form/Button';
257+
258+
render(
259+
<Fragment>
260+
<Button size="lg" className="active" aria-pressed="true" href="#">
261+
Primary link
262+
</Button>
263+
<Button
264+
kind="secondary"
265+
size="lg"
266+
className="active"
267+
aria-pressed="true"
268+
href="#"
269+
>
270+
Link
271+
</Button>
272+
</Fragment>
273+
);
274+
```
275+
276+
## Disabled state
277+
278+
Make buttons look inactive by adding the `disabled` boolean property to any `<Button />` component.
279+
280+
<Example>
281+
<Button size="lg" disabled>
282+
Primary button
283+
</Button>
284+
<Button kind="secondary" size="lg" disabled>
285+
Button
286+
</Button>
287+
</Example>
288+
289+
```TSX
290+
import { render, createCell, Fragment } from 'web-cell';
291+
import { Button } from 'boot-cell/source/Form/Button';
292+
293+
render(
294+
<Fragment>
295+
<Button size="lg" disabled>
296+
Primary button
297+
</Button>
298+
<Button kind="secondary" size="lg" disabled>
299+
Button
300+
</Button>
301+
</Fragment>
302+
);
303+
```
304+
305+
<Example>
306+
<Button size="lg" href="https://web-cell.dev/" disabled>
307+
Primary button
308+
</Button>
309+
<Button kind="secondary" size="lg" href="https://web-cell.dev/" disabled>
310+
Button
311+
</Button>
312+
</Example>
313+
314+
```TSX
315+
import { render, createCell, Fragment } from 'web-cell';
316+
import { Button } from 'boot-cell/source/Form/Button';
317+
318+
render(
319+
<Fragment>
320+
<Button size="lg" href="https://web-cell.dev/" disabled>
321+
Primary button
322+
</Button>
323+
<Button kind="secondary" size="lg" href="https://web-cell.dev/" disabled>
324+
Button
325+
</Button>
326+
</Fragment>
327+
);
328+
```

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bootcell-document",
3-
"version": "0.30.0",
3+
"version": "0.31.0",
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
66
"boot-cell": "^1.0.0-rc.26",

0 commit comments

Comments
 (0)