A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{t as e}from"./jsx-runtime-D-oznMWL.js";import{t}from"./button-B3FtKFjE.js";import{t as n}from"./PropDocs-CM9cNaM3.js";import{t as r}from"./download-BLAWaY3f.js";import{t as i}from"./settings-H2zLFrdP.js";import{t as a}from"./upload-CjozFIiv.js";import{t as o}from"./flex-oubf-_sd.js";import{t as s}from"./Example-DfDcphuv.js";var c=e();function l(){return(0,c.jsx)(t,{children:`Click me`})}l.slug=`/examples/button/basic`;function u(){return(0,c.jsxs)(o,{gap:`2xl`,wrap:!0,children:[(0,c.jsx)(t,{variant:`primary`,children:`Primary`}),(0,c.jsx)(t,{variant:`secondary`,children:`Secondary`}),(0,c.jsx)(t,{variant:`tertiary`,children:`Tertiary`}),(0,c.jsx)(t,{variant:`outline`,children:`Outline`}),(0,c.jsx)(t,{variant:`critical`,children:`Critical`}),(0,c.jsx)(t,{variant:`critical-outline`,children:`Critical Outline`})]})}u.slug=`/examples/button/variants`;function d(){return(0,c.jsxs)(o,{gap:`2xl`,align:`center`,children:[(0,c.jsx)(t,{size:`sm`,children:`Small`}),(0,c.jsx)(t,{size:`md`,children:`Medium`}),(0,c.jsx)(t,{size:`lg`,children:`Large`})]})}d.slug=`/examples/button/sizes`;function f(){return(0,c.jsxs)(o,{gap:`2xl`,wrap:!0,children:[(0,c.jsxs)(t,{children:[(0,c.jsx)(r,{}),`Download`]}),(0,c.jsxs)(t,{variant:`secondary`,children:[(0,c.jsx)(a,{}),`Upload`]}),(0,c.jsxs)(t,{variant:`tertiary`,children:[(0,c.jsx)(i,{}),`Settings`]})]})}f.slug=`/examples/button/with-icons`;function p(){return(0,c.jsxs)(o,{gap:`2xl`,wrap:!0,children:[(0,c.jsx)(t,{children:`Default`}),(0,c.jsx)(t,{isDisabled:!0,children:`Disabled`}),(0,c.jsx)(t,{isPressed:!0,children:`Pressed`})]})}p.slug=`/examples/button/states`;function m(){return(0,c.jsxs)(o,{gap:`2xl`,wrap:!0,children:[(0,c.jsx)(t,{isLoading:!0,children:`Loading`}),(0,c.jsx)(t,{variant:`secondary`,isLoading:!0,children:`Loading Secondary`})]})}m.slug=`/examples/button/loading`;var h=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Features`,id:`features`,children:[{depth:3,value:`Variants`,id:`variants`},{depth:3,value:`Sizes`,id:`sizes`},{depth:3,value:`With Icons`,id:`with-icons`},{depth:3,value:`States`,id:`states`},{depth:3,value:`Loading State`,id:`loading-state`}]},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function g(e){let t={a:`a`,code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(s,{src:l}),`
2`,(0,c.jsx)(t.h2,{id:`installation`,children:`Installation`}),`
3`,(0,c.jsx)(t.p,{children:`Run the following command to add the button component to your project.`}),`
4`,(0,c.jsx)(c.Fragment,{children:(0,c.jsx)(t.pre,{className:`shiki shiki-themes github-light github-dark`,style:{backgroundColor:`light-dark(#fff, #24292e)`,"--shiki-light-bg":`#fff`,"--shiki-dark-bg":`#24292e`,color:`light-dark(#24292e, #e1e4e8)`,"--shiki-light":`#24292e`,"--shiki-dark":`#e1e4e8`},tabIndex:`0`,children:(0,c.jsx)(t.code,{className:`language-bash`,children:(0,c.jsxs)(t.span,{className:`line`,children:[(0,c.jsx)(t.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,c.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,c.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,c.jsx)(t.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` button`})]})})})}),`
5`,(0,c.jsx)(t.h2,{id:`features`,children:`Features`}),`
6`,(0,c.jsx)(t.h3,{id:`variants`,children:`Variants`}),`
7`,(0,c.jsx)(t.p,{children:`The button comes in four different variants to suit different use cases.`}),`
8`,(0,c.jsx)(s,{src:u}),`
9`,(0,c.jsx)(t.h3,{id:`sizes`,children:`Sizes`}),`
10`,(0,c.jsx)(t.p,{children:`The button supports three different sizes.`}),`
11`,(0,c.jsx)(s,{src:d}),`
12`,(0,c.jsx)(t.h3,{id:`with-icons`,children:`With Icons`}),`
13`,(0,c.jsx)(t.p,{children:`Buttons can include icons alongside text for better visual communication.`}),`
14`,(0,c.jsx)(s,{src:f}),`
15`,(0,c.jsx)(t.h3,{id:`states`,children:`States`}),`
16`,(0,c.jsx)(t.p,{children:`Buttons support different interactive states.`}),`
17`,(0,c.jsx)(s,{src:p}),`
18`,(0,c.jsx)(t.h3,{id:`loading-state`,children:`Loading State`}),`
19`,(0,c.jsx)(t.p,{children:`Buttons can show a loading state during async operations.`}),`
20`,(0,c.jsx)(s,{src:m}),`
21`,(0,c.jsx)(t.h2,{id:`props`,children:`Props`}),`
22`,(0,c.jsxs)(t.p,{children:[`This component is built using the `,(0,c.jsx)(t.a,{href:`https://react-spectrum.adobe.com/react-aria/Button.html`,children:`React Aria Button`}),`.`]}),`
23`,(0,c.jsx)(n,{components:[`Button`]}),`
24`,(0,c.jsx)(t.h2,{id:`related-components`,children:`Related Components`}),`
25`,(0,c.jsxs)(t.ul,{children:[`
26`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`/docs/components/buttons/icon-button`,children:`IconButton`}),` - For icon-only buttons`]}),`
27`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`/docs/components/buttons/toggle-button`,children:`ToggleButton`}),` - For toggleable buttons`]}),`
28`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`/docs/components/buttons/button-group`,children:`ButtonGroup`}),` - For grouping buttons together`]}),`
29`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.a,{href:`/docs/components/navigation/link`,children:`Link`}),` - For navigation links that look like buttons`]}),`
30`]})]})}function _(e={}){let{wrapper:t}=e.components||{};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(g,{...e})}):g(e)}export{_ as default,h as toc};