Components
CardButton
A card that is a single button as a whole
Overview
CardButton is a card where the whole surface is one button, such as an item in the project list or a statistics card that opens more detail. Its hover, pressed and selected colors belong to the component. Spacing, radius and layout come from Box props.
Do not put other buttons or inputs inside it. A button cannot contain another control.
Selected
Use aria-current for the item currently shown from a list. Use aria-pressed for a card that toggles on and off.
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
aria-current | boolean | - | No | true for the item currently shown in a list. Darkens the border |
onClick | MouseEventHandler<HTMLButtonElement> | - | No | Click handler |
children | ReactNode | - | Yes | Card content (no buttons or inputs) |
className | string | - | No | Extra CSS class |
Specification
base
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| enabled | root | borderWidth | $size.stroke.border |
| enabled | root | borderColor | $color.border.default.default |
| enabled | root | backgroundColor | $color.background.default.default |
| hover | root | backgroundColor | $color.background.default.defaultHover |
| pressed | root | backgroundColor | $color.background.default.defaultPressed |
| selected | root | borderColor | $color.border.default.secondary |
| focusVisible | root | outlineWidth | $size.stroke.focus |
| focusVisible | root | outlineStyle | solid토큰 아님 — no line style token |
| focusVisible | root | outlineColor | $color.border.focus.default |
| focusVisible | root | outlineOffset | 2px토큰 아님 — no ring offset token |
Usage Guidelines
Do
- Use Text with
as="span"inside, since a button should only contain text-level content - Keep the same spacing for every card in a list
Don't
- Don't nest buttons, links or inputs inside a CardButton
- Don't build a clickable card from Box, Stack or Inline. They have no hover, focus or selected styles